ReactJS与NodeJS应用通信异常：代理配置无效问题求助

我开发ReactJS前端（运行在3000端口）+ NodeJS后端（3001端口连接MS SQL数据库）时，遇到数据无法保存的问题。已在前端package.json中添加"proxy": "http://localhost:3001"，并尝试重启服务器、清除缓存、删除node_modules后重新npm install，但均无效。后端server.js中/api/saveDriverInformation的中间件日志能正常打印，但saveDriverInformationController.js中的POST路由未被触发，前端收到错误：xhr.js:256 POST http://localhost:3000/api/saveDriverInformation 404 (Not Found)，推测代理未生效。

核心问题分析 #

你的路由配置存在重复挂载路径的问题，导致实际请求路径不匹配：

• server.js中通过app.use("/api/saveDriverInformation", saveDriverInformationController)给控制器指定了路径前缀
• 但控制器内部又定义了router.post('/api/saveDriverInformation', ...)，最终实际生效的请求路径变成了/api/saveDriverInformation/api/saveDriverInformation，自然返回404

修复步骤 #

1. 修改控制器的路由路径 #

将saveDriverInformationController.js中的路由路径改为根路径（因为挂载时已指定前缀）：

// 原代码
router.post('/api/saveDriverInformation', async (req, res) => { ... })

// 修改后
router.post('/', async (req, res) => { ... })

2. 验证代理有效性（可选） #

如果修改后仍有问题，可直接在前端请求中使用完整后端地址测试，确认代理是否真的生效：

// profile.tsx中修改请求地址
const response = await axios.post("http://localhost:3001/api/saveDriverInformation", values);

若该请求成功，说明代理配置存在问题，可尝试以下方案：

• 确认React项目基于create-react-app创建（proxy配置仅在CRA默认生效）
• 非CRA项目手动配置代理：
  1. 安装依赖：npm install http-proxy-middleware --save
  2. 在src目录创建setupProxy.js：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/api',
         createProxyMiddleware({
           target: 'http://localhost:3001',
           changeOrigin: true,
         })
       );
     };
     

  3. 重启前端服务器

3. 确认后端路由顺序 #

确保API路由在静态文件和兜底路由之前定义，当前server.js的顺序已正确，无需修改：

// 正确顺序：先API路由 → 再静态文件 → 最后兜底路由
app.use("/api/saveDriverInformation", (req, res, next) => { ... });
app.use("/api/saveDriverInformation", saveDriverInformationController);
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => { ... });

验证修复 #

修改完成后重启前后端服务器，重新提交请求：

• 后端应能打印Here及数据库操作相关日志
• 前端收到200响应，控制台输出"Data saved successfully"

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