Angular 10生产环境CORS错误解决 现有proxy配置仅开发生效

首先明确基础认知：proxy.conf.json是Angular CLI内置开发服务器（ng serve命令启动的本地服务）提供的请求转发能力，生产构建输出的是纯静态HTML/JS/CSS文件，部署时没有自带的代理运行时，因此之前的代理配置完全无法在生产生效是正常现象。

方案一：在生产Web服务层配置反向代理（最稳妥、零代码改动复现开发代理逻辑） #

生产环境部署Angular静态包，通常会使用Nginx、IIS、Apache这类Web服务器托管资源，只需要把开发环境的代理规则迁移到这些Web服务器的配置里，就能完全复现本地代理的效果，从根源上消除跨域问题：

• 核心原理：浏览器只和你自己的生产域名发请求，由Web服务器把匹配路径的请求转发到真实的第三方接口地址，服务器端转发的请求不受浏览器同源策略限制，不存在跨域问题。
• 匹配规则完全对齐你现有代理配置：拦截路径前缀为/validation/v1/reference/*的请求，全部转发到目标地址https://secure.epayco.co
• 以最常用的Nginx配置为例，直接复制到站点的server块下即可运行：

  # 对应原proxy.conf.json里的/validation/v1/reference/*规则
  location /validation/v1/reference/ {
      proxy_pass https://secure.epayco.co;
      proxy_set_header Host secure.epayco.co;
      proxy_ssl_verify off; # 对齐原proxy配置的secure:false参数
      proxy_set_header X-Real-IP $remote_addr;
  }
  

• 配套注意事项：前端代码里的接口地址要和开发环境保持一致，统一写相对路径（比如/validation/v1/reference/xxx），不要直接硬编码第三方接口的完整域名，这样开发走本地Angular代理、生产走Web服务器反向代理，全程不需要修改业务代码。

方案二：由接口提供方配置跨域响应头（需对方配合的备选方案） #

如果你的部署场景没法加自定义的Web服务反向代理，只能推动接口提供方在服务端配置跨域允许规则：

• 配置要求：接口返回响应时，需要在HTTP头里加入允许你生产域名访问的规则，包括对应允许的源域名、请求方法、自定义请求头字段。
• 局限性：如果对接的是公共第三方接口（比如你当前用的支付类接口），提供方一般不会针对单个客户单独配置跨域白名单，这种方案的落地性不如反向代理，稳定性也更差。

避坑提醒 #

• 不要尝试通过前端代码逻辑绕过CORS限制，浏览器的同源策略是内核层面的安全规则，纯前端没有办法绕过，所有号称前端改一行代码解决跨域的方案，本质都是临时本地代理，生产环境无法复用。
• 不要为了复用代理逻辑在生产环境启动Angular开发服务器，这会暴露源码、存在高危安全漏洞，性能也完全达不到生产要求。
• 配置反向代理时一定要把请求头里的Host值改成目标接口的域名，否则很多第三方接口会因为Host头不匹配直接返回403拒绝请求。

内容的提问来源于stack exchange，提问作者Juan Sebastian Cabra Leon