React使用http-proxy-middleware配置代理部署后接口报错如何解决？

问题根因 #

• React 开发环境下的代理能力（包括 http-proxy-middleware 配置、package.json 中的 proxy 字段）仅作用于本地启动的开发服务器，生产环境打包后生成的是纯静态文件，没有内置的代理服务能力。
• 部署到 Netlify、Firebase Hosting、Heroku 静态托管场景后，你发起的 /pool/.json 请求会被平台判定为请求站点内的静态资源，匹配不到对应资源时会返回 React 的默认入口 index.html，该文件默认包含 "You need to enable JavaScript to run this app" 的兜底文本，因此会出现该错误提示。

额外注意：你当前代理配置中的 target 字段存在语法错误，正确格式应为 target: "https://myapi/api"，缺少了 https 后的双斜杠。

可行解决方案 #

方案1：使用托管平台的原生代理/重写规则 #

各静态托管平台都提供了路由重写/反向代理能力，直接在项目根目录添加对应平台的配置文件即可生效：

• Netlify：根目录新建 _redirects 文件，添加规则：

  /pool/.json  https://myapi/api/pool/.json  200
  

• Firebase Hosting：修改 firebase.json 的 hosting 节点，添加重写规则：

  {
    "hosting": {
      "rewrites": [
        {
          "source": "/pool/.json",
          "destination": "https://myapi/api/pool/.json"
        }
      ]
    }
  }
  

• Heroku：如果是静态部署场景，可以添加极简 Node 服务层处理代理，也可以直接选用方案2。

方案2：直接调用后端接口+配置CORS #

无需使用代理，直接把前端代码中请求 /pool/.json 的路径改为完整的后端绝对路径 https://myapi/api/pool/.json，同时在后端服务配置跨域资源共享（CORS）规则，允许你的前端站点域名发起请求即可，该方案无需额外配置托管规则，适配所有部署场景。

内容的提问来源于stack exchange，提问作者Phạm Chỉnh