Angular调用外部公共API的proxy代理生产环境404错误解决方案求助

问题根源 #

你本地开发时使用的是Angular CLI开发服务器自带的代理功能，该代理仅在本地开发阶段生效，生产环境打包部署的是纯静态资源，没有内置代理服务，所以请求你的站点域名/jsonip会直接返回404。另外浏览器出于安全限制，禁止前端代码手动修改Origin、Referer这类受保护的请求头，所以你手动加Origin头的操作会被Chrome直接拦截。

解决方案 #

方案1：直接请求公共接口（最简方案） #

jsonip.com官方已经开启了CORS跨域支持，前端可以直接跨域调用，不需要走自身站点的代理层，修改请求逻辑即可：

// 开发阶段走本地代理，生产阶段直接请求目标接口
const ipApiUrl = environment.production ? 'https://jsonip.com' : `${environment.WEBSITE_URL}/jsonip`;
this.http.get(ipApiUrl, {headers: headers}).subscribe(
  (value:any) => {
    this.ipAddress = value.ip;
  },
  (error) => {
    console.log(error);
  }
);

修改后重新打包部署即可生效，不需要调整任何服务端配置。

方案2：生产环境配置反向代理 #

如果有合规要求必须走自有域名转发，可以在生产环境的Web服务器上配置和本地规则一致的反向代理，以常用的Nginx为例，在站点配置中添加如下规则：

location /jsonip {
    proxy_pass https://jsonip.com;
    proxy_set_header Host jsonip.com;
    proxy_ssl_server_name on;
}

如果使用Apache、云服务商静态托管服务，也可以在对应后台配置逻辑一致的反向代理规则。

方案3：后端接口转发 #

如果你的应用有配套后端服务，可以自行开发一个转发接口，由后端服务请求jsonip.com拿到结果后返回给前端，前端直接调用自有后端接口即可，完全规避跨域问题。

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