React 开发服务器的 proxy 配置虽可转发请求，但若 Express 路由挂载路径与内部路由定义重复（如双重 /api/saveDriverInformation），将导致 404；需统一前缀层级并确保路由注册逻辑匹配。
react 开发服务器的 `proxy` 配置虽可转发请求，但若 express 路由挂载路径与内部路由定义重复（如双重 `/api/savedriverinformation`），将导致 404；需统一前缀层级并确保路由注册逻辑匹配。
在 React + Node.js（Express）全栈开发中，前端运行于 http://localhost:3000、后端 API 运行于 http://localhost:3001 是常见场景。此时，为规避浏览器同源策略限制，开发者常依赖 package.json 中的 "proxy" 字段实现开发期请求代理——但它仅在开发模式下生效（即 npm start），且其行为高度依赖 Express 服务端路由结构是否与代理路径语义一致。
你遇到的错误 POST http://localhost:3000/api/saveDriverInformation 404 (Not Found) 表明：React 请求已成功经代理转发至 http://localhost:3001/api/saveDriverInformation，但 Express 并未在此路径上注册有效处理器。根本原因在于 路由挂载路径与内部定义路径发生嵌套叠加：
- 你在 server.js 中执行了：
app.use("/api/saveDriverInformation", saveDriverInformationController); - 而在 saveDriverInformationController.js 中又定义了：
router.post('/api/saveDriverInformation', ...); // ❌ 错误：实际注册路径变为 /api/saveDriverInformation/api/saveDriverInformation
这导致 Express 实际监听的是 /api/saveDriverInformation/api/saveDriverInformation，而非预期的 /api/saveDriverInformation，因此返回 404。
✅ 正确做法是：分离路由前缀职责——由 app.use() 统一声明基础路径，Router 内部只定义子路径。
✅ 修正步骤
1. 修改 server.js：统一挂载到 /api
// server.js —— 改为挂载整个 /api 前缀
app.use("/api", saveDriverInformationController); // ✅ 挂载到 /api
2. 修改 saveDriverInformationController.js：移除重复前缀
// saveDriverInformationController.js —— 只定义相对路径
router.post('/saveDriverInformation', async (req, res) => { // ✅ 不再写 '/api/...'
console.log("Here"); // 现在能正常触发
try {
// ...原有业务逻辑保持不变
res.status(200).json({ message: 'Driver information saved successfully' });
} catch (error) {
console.error('Error saving driver information:', error);
res.status(500).json({ error: 'An error occurred while saving driver information' });
} finally {
await db.closeDB();
}
});
3. 确保 package.json 代理配置正确（当前已正确）
{
"name": "reactrefreshed",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001", // ✅ 正确：所有 /api/* 请求将被代理到 http://localhost:3001
// ...
}
4. 前端调用保持简洁（无需改协议/域名）
// profile.tsx
onSubmit: async (values) => {
try {
const response = await axios.post("/api/saveDriverInformation", values); // ✅ 自动代理到 http://localhost:3001/api/saveDriverInformation
if (response.status === 200) {
console.log("Data saved successfully");
}
} catch (error) {
console.error("Error while saving data:", error);
}
};
⚠️ 注意事项与补充建议
- 代理仅限开发环境："proxy" 不会影响 build 后的生产部署。上线时需通过 Nginx 反向代理或配置后端 CORS 支持真实跨域。
- CORS 已启用，但非主因：你已在 server.js 中配置 cors({ origin: "http://localhost:3000" })，说明跨域本身不是问题；404 是纯路由匹配失败。
- 验证代理是否生效：在浏览器 Network 面板中查看请求 URL 是否仍显示 localhost:3000（代理成功则地址栏不变更，但响应来自 3001）。
- 避免重复中间件：server.js 中同时使用了 app.use(bodyParser.json()) 和 router.use(bodyParser.json())，保留一处即可（推荐在 app 层统一配置）。
- 启动顺序无关紧要：只要 React 用 npm start 启动、Express 独立运行在 3001，代理即可工作——无需重启 npm 或清缓存（除非修改了 package.json 的 proxy 后未重启 dev server）。
完成上述调整后，重启 React 开发服务器（npm start）和 Express 服务（node server.js），提交表单时 saveDriverInformationController 中的 console.log("Here") 将被打印，数据即可成功写入 SQL Server。
路由设计本质是路径映射契约：app.use(path, router) 定义“入口”，router.METHOD(subpath, ...) 定义“内部路径”；二者拼接才是最终可访问地址。 掌握这一原则，可避免绝大多数代理+路由组合陷阱。
