React通过Axios向Express发送POST请求时出现404错误求助

服务器端核心错误（导致404的主要原因） #

• 路由未挂载到Express应用：你定义了router.post("/uploadData")但没有把router注册到app上，服务器根本识别不到这个路由。需要在router定义完成后添加app.use(router);。
• 语法错误：onst app = express(); 少了字母c，应改为const app = express();，这个错误会导致服务器无法正常初始化路由。
• 模型缺失导入：代码中使用了Videos.create，但未看到对应的模型导入语句，需要补充（比如const Videos = require('./models/Videos');，路径根据实际文件位置调整），否则后续会触发新的报错。

客户端次要问题（不影响404，但会导致数据传递异常） #

• Title输入框未绑定事件：你的title输入框没有添加onChange={handleTextChange}，输入的标题无法同步到state，提交时title值为空。修改后代码如下：

  <Form.Control type="text" name="title" onChange={handleTextChange} />
  

修正后的Express服务器代码示例 #

const express = require("express");
const bodyParser = require('body-parser');
const Videos = require('./models/Videos'); // 补充模型导入
const router = express.Router();
const app = express(); // 修复语法错误

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

router.post("/uploadData", async (req, res) => {
  try{
    const newVideo = await Videos.create({title: req.body.title, desc: req.body.desc});
    res.send({newVideo});
  } catch(err) {
    res.status(400).send({error: err});
  }
});

app.use(router); // 挂载路由到应用

const port = 5000;
app.listen(port, () => {
  console.log(`Server Listening on ${port}`);
});

内容的提问来源于stack exchange，提问作者Faraz