Express.js与React连接失败：配置Proxy后仍出现POST 404错误

我来帮你一步步排查这个POST请求404的问题——这种proxy不生效的情况很常见，大多是细节没处理到位，咱们逐个检查：

• 确认package.json里的proxy配置是否正确
  首先要保证"proxy"字段是在package.json的根级别，不是嵌套在某个对象里，而且拼写和格式不能错：

  {
    "name": "your-react-app",
    "version": "0.1.0",
    "proxy": "http://localhost:8080", // 这里要在根级别，别写错位置
    // 其他配置...
  }
  

  注意是小写的proxy，值里不要加多余的斜杠或者空格。

• 验证Express服务器和/login路由是否正常
  先直接测试Express的接口：打开Postman或者浏览器，发送POST请求到http://localhost:8080/login。如果这个请求也返回404，那问题不在React的proxy，而是你的Express服务器没有正确定义POST /login路由，或者服务器根本没在8080端口启动。
  要确保Express里有类似这样的代码：

  app.post('/login', (req, res) => {
    // 你的路由逻辑
    res.send('登录接口响应');
  });
  

• 检查React里的请求写法
  确保你在React里发送请求时，没有硬编码完整的URL。比如应该写：

  fetch('/login', {
    method: 'POST',
    // 其他配置...
  })
  

  而不是fetch('http://localhost:3000/login', ...)——如果硬编码了3000（React的端口），proxy规则就不会生效，请求会直接打到React服务器，自然找不到/login路由。

• 重启React开发服务器
  很多人容易忽略这点：修改package.json里的proxy配置后，必须重启React的dev server，新的proxy规则才会生效。关闭当前的npm start进程，重新启动一次试试。

• 如果是多代理场景，改用http-proxy-middleware
  如果你用的是create-react-app 2.0及以上版本，默认的proxy只支持单个目标地址。如果需要代理多个路径，或者有更复杂的需求，得用http-proxy-middleware：

  1. 先安装依赖：npm install http-proxy-middleware --save-dev
  2. 在React项目的src目录下创建setupProxy.js文件，写入：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/login',
      createProxyMiddleware({
        target: 'http://localhost:8080',
        changeOrigin: true, // 这个参数很重要，避免跨域问题
      })
    );
  };
  

  这个文件不需要手动引入，create-react-app会自动加载它。

• 检查Express的CORS设置（可选）
  虽然proxy会帮你转发请求，理论上不需要配置CORS，但如果Express服务器有严格的跨域限制，也可能间接导致问题。可以临时在Express里加个CORS中间件测试：

  const cors = require('cors');
  app.use(cors());
  

  不过如果前面的步骤都没问题，这一步可能不是必需的。

按照上面的步骤排查，应该能找到问题所在。

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