React中setupProxy.js代理未指向localhost:8000求助

可能的原因及对应解决方法 #

1. 适配http-proxy-middleware版本调整配置 #

http-proxy-middleware v2.x版本API有更新，结合你使用的react-scripts 5.x，可以尝试补充路径重写规则（如果后端接口不带/api前缀），确保代理转发逻辑正确：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8000',
      changeOrigin: true,
      pathRewrite: { '^/api': '' } // 若后端接口无/api前缀，需添加此规则
    })
  );
};

2. 清除开发服务器缓存并重启 #

React开发服务器可能缓存旧配置，导致新代理规则不生效：

• 终止当前npm start进程
• 删除项目根目录下的node_modules/.cache文件夹
• 重新执行npm start

3. 排查代理冲突 #

• 确认package.json中未配置proxy字段（该字段会与setupProxy.js规则冲突），你的配置中无此字段，这部分没问题
• 检查项目中是否有其他自定义中间件或路由拦截了/api开头的请求

4. 验证请求路径与后端接口匹配 #

你的请求路径是/api/add_new_user，需确认后端接口地址是否为http://localhost:8000/api/add_new_user：

• 若Postman测试的是http://localhost:8000/add_new_user（不带/api），必须添加上述的pathRewrite规则

5. 移除无效依赖 #

你的package.json中存在无效依赖"5": "^0.0.1"，建议执行npm uninstall 5移除，避免潜在的依赖冲突

6. 确认文件位置与命名 #

确保setupProxy.js确实位于src目录下，且文件名大小写正确（Linux/macOS系统对文件名大小写敏感）

额外验证步骤 #

可在setupProxy.js中添加日志，确认配置是否被加载：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  console.log('代理配置已加载'); // 启动时终端会打印此日志
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8000',
      changeOrigin: true,
      logLevel: 'debug' // 开启调试日志，查看请求转发细节
    })
  );
};

重启服务器后，若终端出现对应日志，说明代理配置已被识别；若未出现，需检查文件路径或命名是否符合要求

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