React应用部署至Firebase时如何配置代理规则

配置说明 #

开发阶段使用的http-proxy-middleware是webpack-dev-server提供的本地代理能力，仅在开发模式生效。生产部署到Firebase托管时，可直接通过firebase.json配置重写规则实现相同的代理效果，无需修改前端请求代码。

完整配置示例 #

修改项目根目录下的firebase.json文件，添加对应代理路径的重写规则：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 对应你原来的/xxx路径代理
      {
        "source": "/xxx/**",
        "destination": "https://www......com/xxx/**"
      },
      // 对应你原来的/random路径代理
      {
        "source": "/random",
        "destination": "https://zenquotes.io/api/random"
      },
      // React单页应用通用规则，避免前端路由刷新404
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

部署验证 #

1. 执行npm run build打包React项目，确保产物输出到build目录
2. 执行firebase deploy部署到Firebase托管即可

注意事项 #

• 如果代理路径需要匹配多级子路径，source字段末尾加/**，目标地址末尾也同步加/**，Firebase会自动将匹配到的路径后缀拼接转发到目标地址
• Firebase托管代理默认会自动设置正确的origin请求头，无需额外配置对应开发阶段的changeOrigin参数

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