React项目构建遇Proxy error，配置package.json后仍报错如何解决

问题描述 #

Proxy error: Could not proxy request /logo192.png from localhost:3000 to http://127.0.0.1:5000/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

已在package.json中配置代理：

"proxy": "http://127.0.0.1:5000/"

修复步骤 #

• 确认后端服务处于运行状态
  ECONNREFUSED错误本质是前端请求的后端端口（5000）没有服务监听。直接访问http://127.0.0.1:5000，检查后端是否能正常响应。如果打不开，先启动你的后端服务（Flask/Django/Express等）。

• 核对代理地址准确性
  检查package.json里的代理地址和后端服务地址完全匹配：

  • 确认端口号是5000，没有拼写错误
  • 若后端用localhost而非127.0.0.1，尝试将代理地址改为"http://localhost:5000/"，部分环境下两者解析逻辑有差异

• 重启React开发服务器
  修改package.json的代理配置后，必须重启npm start启动的React服务，新配置才会生效。

• 检查端口占用
  确认5000端口没被其他程序占用：

  • Windows：命令提示符执行netstat -ano | findstr :5000，关闭占用端口的进程，或修改后端服务端口
  • macOS/Linux：终端执行lsof -i :5000，处理占用进程

• 使用自定义代理配置（create-react-app 2.0+适用）
  若上述方法无效，可创建src/setupProxy.js实现更灵活的代理：

  1. 安装依赖：

     npm install http-proxy-middleware --save-dev
     

  2. 在src/setupProxy.js中添加代码：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/', // 代理所有请求，也可指定特定路径前缀如'/api'
         createProxyMiddleware({
           target: 'http://127.0.0.1:5000',
           changeOrigin: true,
         })
       );
     };
     

  注意：删除package.json中的proxy配置，避免冲突，然后重启React服务。

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