Firebase Hosting无法调用外部API，需在firebase.json中添加什么配置？

问题根因定位 #

• 核心原因大概率是混合内容拦截：你当前API使用的是http://明文协议，而Firebase Hosting托管的站点默认走HTTPS协议，Chrome、Edge等主流浏览器会默认拦截HTTPS页面发起的HTTP明文请求，这就是你看不到请求发出、EC2也没有访问日志的原因。本地开发环境一般是HTTP运行，所以不会触发该拦截规则。
• 次要可能是跨域预检规则拦截：即使你已经在EC2配置了CORS，部分浏览器对公网IP的跨域请求依然会有更严格的校验规则，也可能导致请求被拦截。

具体解决方案 #

方案1：优先修复API协议（推荐） #

给EC2实例配置SSL证书，将API地址修改为https://协议即可，SSL证书可以通过Let's Encrypt免费申请，配置在EC2的Web服务（Nginx、Apache或直接配置在你的应用服务上）即可。
修改后的代码示例：

// 将原http地址改为https地址
const String api = 'https://7.91.300.2411:8080/predict';
 Map<String, String> upload = {'data1': _data1, 'data2': _data2};
var _body = jsonEncode(upload);
final Uri uri = Uri.parse(api);
http.Response response =
    await http.post(uri, headers: _headers, body: _body);

修改完成后先在本地用HTTPS地址测试请求正常，再重新构建Flutter Web产物部署到Firebase Hosting即可。

方案2：配置Firebase Hosting反向代理（解决顽固跨域问题） #

如果修改HTTPS后仍然有跨域问题，可以在firebase.json中配置代理规则，让API请求走Firebase站点同源路径转发，完全规避跨域问题：

1. 编辑项目根目录下的firebase.json，在hosting节点下添加对应的重写规则：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 新增API代理规则
      {
        "source": "/api/**",
        "destination": "http://7.91.300.2411:8080/**"
      },
      // 原有Flutter单页应用路由规则保留
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

2. 修改代码中的API地址为相对路径：

const String api = '/api/predict';

3. 重新执行flutter build web构建产物，再部署到Firebase Hosting即可生效。
   注意：该代理规则仅在Firebase Hosting部署后生效，本地开发时仍使用原EC2直连地址测试即可。

排查小技巧 #

如果修改后仍然异常，打开部署后站点的浏览器开发者工具，切换到「控制台」和「网络」标签页，即可看到明确的请求错误信息，可根据错误提示针对性排查。

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