如何将React表单数据发送到后端express服务器

Question

我制作了这个react表单，并希望将候选对象发送到后端express服务器，在那里我希望控制台记录候选对象。我已经检查过表格是否正确输入。我正在使用axios向快递后端发送邮件请求。

import React, { Fragment, useState } from "react";
import axios from "axios";
const Form = () => {
const [candidate, setCandidate] = useState({
fullName: "",
phoneNumber: 0,
email: "",
gitProfile: "",
linkToResume: "",
designation: "",
interest: "",
});
const onChange = e =>
setCandidate({ ...candidate, [e.target.name]: e.target.value });
const onSubmit = e => {
e.preventDefault();
axios
.post("http://localhost:5000/", {
candidate,
})
.then(res => {
console.log(res, candidate);
});
};
const designationOptions = [
"--select option--",
"Graphic Designer",
"Full Stack Developer",
"Project Manager",
"SEO and Digital Marketing",
];
return (
//form input code
);
};
export default Form;

这是后端express服务器代码。

const express = require("express"),
bodyParser = require("body-parser");
(app = express()), (port = process.env.PORT || 5000), (cors = require("cors"));
app.use(
cors({
origin: "http://localhost:3000",
credentials: true,
})
);
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true,
})
);
app.get("/", function (req, res) {
console.log(req.body);
});
app.listen(port, () => console.log(`Backend server live on ${port}`));

我想发送候选对象并console.log对象，但我收到了404错误。我在父目录下的两个不同文件夹中有这个设置。

Answer 1

您正在使用app.get，同时将axios作为POST发送请求。尝试将app.get切换到app.post