React项目Proxy error ECONNRESET/ECONNREFUSED报错修复方法

你遇到的代理报错由三个问题共同导致：

1. 代理目标地址配置错误：报错显示需要将localhost:3000发出的/api请求转发到后端服务http://localhost:5000，但你package.json中配置的proxy目标地址是http://localhost:3000，等于把请求转发回前端服务自身，触发循环请求，直接抛出ECONNRESET连接重置错误。
2. 代理配置格式不兼容：Create React App 脚手架下，package.json里的proxy字段仅支持直接填写目标地址字符串的简单配置，你当前写的对象格式路径匹配规则不会被脚手架识别，配置完全不生效，请求才会默认尝试转发到5000端口。
3. 后端服务未启动：报错中的ECONNREFUSED连接被拒绝错误，是因为你本地5000端口的后端服务没有正常启动运行，就算代理配置正确，请求也无法到达后端。

按顺序操作即可解决问题：

• 先启动本地5000端口的后端服务，确认服务正常监听对应端口，这是接口能通的前提。
• 修正代理配置，二选一即可：
  • 方案一（简单场景推荐）：所有/api开头的请求都转发到5000端口的话，直接把package.json里的proxy字段替换为字符串格式即可，删除原有对象配置：

    "proxy": "http://localhost:5000"
    

  • 方案二（需要自定义路由规则时使用）：如果要做路径过滤、请求头改写等高级配置，不要在package.json里写对象格式proxy，按官方要求单独配置：
    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://localhost:5000',
          changeOrigin: true,
          secure: false
        })
      );
    };
    

    3. 删除package.json中原有的对象格式proxy字段，避免配置冲突。
• 所有配置修改完成后，必须重启前端react-scripts开发服务，代理配置只有服务启动时会加载，不重启不会生效。

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