生产环境部署后API返回index.html而非结果，是否为http-proxy-middleware代理问题？

setupProxy.js 是 React 脚手架提供的仅本地开发环境生效的配置，仅作用于本地启动的 webpack-dev-server。生产环境打包后，你的应用是纯静态资源，不会加载该代理配置，所有请求会直接发给部署静态资源的Web服务：当服务器找不到 /api 对应的静态资源时，默认会返回SPA应用的 index.html，所以你请求API时拿到的是HTML页面内容，还会包含 <noscript> 标签里的文本。

你需要在部署静态资源的Web服务层配置代理规则，常见场景的配置方式如下：

• Nginx托管场景
  在Nginx的站点配置server块中添加如下规则：

  location /api/ {
      # 替换为你的实际后端服务地址
      proxy_pass http://你的后端服务地址/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  

  注意proxy_pass末尾的斜杠，会自动把/api/xxx重写为/xxx，和你本地的pathRewrite效果一致。
• 云平台托管场景
  • Vercel：在项目根目录新增vercel.json，添加如下配置：

    {
      "rewrites": [
        {
          "source": "/api/:path*",
          "destination": "你的后端服务地址/:path*"
        }
      ]
    }
    

  • Netlify：在项目public目录新增_redirects文件，添加如下规则：

    /api/* 你的后端服务地址/:splat 200
    

• 前后端同服务部署场景
  如果你把React打包后的静态文件直接托管在后端服务下，直接让后端服务处理/api前缀的路由即可，不需要额外配置代理。

• 确认前端所有API请求路径都带有/api前缀，和本地开发时的调用规则保持一致
• 配置代理后先清浏览器缓存再测试，避免旧的重定向规则影响验证结果

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