本文详解 react 前端使用 axios 向 express 后端发送 post 请求时出现 404 的常见原因，包括服务端路由未正确注册、语法错误、中间件缺失及响应处理不当，并提供完整可运行的修复方案。
本文详解 react 前端使用 axios 向 express 后端发送 post 请求时出现 404 的常见原因，包括服务端路由未正确注册、语法错误、中间件缺失及响应处理不当，并提供完整可运行的修复方案。
404 错误表明客户端成功发出了请求，但 Express 服务器根本未识别该路由路径（/uploadData），即请求未被任何路由处理器捕获。这通常不是网络连通性问题，而是服务端配置缺陷所致。以下从客户端与服务端两方面系统排查并修复：
✅ 客户端修复：完善 Axios 请求处理
原始代码中仅使用 .catch(console.log)，既未处理成功响应，也掩盖了具体错误细节。应显式处理 then 与 catch，并确保表单字段绑定正确（注意：title 输入框缺少 onChange 事件，导致 state.title 始终为空）：
const handleSubmit = async (e) => {
e.preventDefault();
const data = { title: state.title, desc: state.desc };
try {
const response = await axios.post("http://localhost:5000/uploadData", data);
console.log("✅ 成功提交：", response.data);
alert("上传成功！");
} catch (error) {
console.error("❌ 请求失败：", error.response?.data || error.message);
alert(`提交失败：${error.response?.data?.error || "未知错误"}`);
}
};
同时，务必为 title 输入框补全 onChange 事件，否则用户输入无法同步到状态：
✅ 服务端修复：修正语法、路由注册与响应格式
原始 Express 代码存在多个致命问题：
- ❌ onst app = express(); 是明显拼写错误（应为 const）；
- ❌ 使用 router.post() 但未通过 app.use(router) 挂载路由，导致 /uploadData 路由完全不可达；
- ❌ 缺少关键中间件（如 express.json() 和 express.urlencoded()），无法解析请求体；
- ❌ res.send() 不符合 REST 规范，应统一使用 res.status().json() 显式声明状态码与 JSON 格式。
修复后的完整服务端代码如下：
const express = require("express");
const cors = require("cors");
const app = express(); // ✅ 修正拼写：const（非 onst）
const port = 5000;
// ✅ 必备中间件：解析 JSON 和 URL 编码数据
app.use(cors());
app.use(express.json()); // 替代已废弃的 bodyParser.json()
app.use(express.urlencoded({ extended: true })); // 替代 bodyParser.urlencoded()
// ✅ 直接使用 app.post()（无需 router），确保路由生效
app.post("/uploadData", async (req, res) => {
try {
// 假设 Videos 是已定义的 Mongoose 模型
const newVideo = await Videos.create({
title: req.body.title,
desc: req.body.desc,
});
res.status(201).json({ success: true, data: newVideo }); // ✅ 201 表示资源创建成功
} catch (err) {
console.error("数据库错误：", err);
res.status(400).json({ success: false, error: err.message });
}
});
app.listen(port, () => {
console.log(`✅ 服务已启动：http://localhost:${port}`);
});
⚠️ 其他关键注意事项
- 跨域问题：若前端不在 http://localhost:3000 运行，或后端未启用 cors()，将触发预检失败（CORS Error），而非 404。确保 app.use(cors()) 在所有路由前注册。
- 端口确认：用 curl -v http://localhost:5000/uploadData 或 Postman 测试接口是否可达，排除服务未启动或端口占用问题。
- 环境一致性：确保前后端均运行在开发模式（如 npm start + npm run dev），且无代理配置冲突。
通过以上修复，404 错误将彻底消除，Axios 请求可稳定接收服务端 JSON 响应。核心原则是：服务端必须显式声明并挂载路由，客户端需正确构造请求并处理全流程异常。
