React应用部署生产环境调用API出现CORS跨域拦截问题求助

你遇到的生产环境CORS报错核心原因有两点：

• package.json中配置的proxy代理，仅在Create React App本地开发服务运行时生效。项目打包部署到生产环境后，代码会被编译为纯静态资源，不存在本地开发服务器做请求转发，因此该代理配置在生产环境完全不生效。
• 生产环境前端页面源为https://xxxx-private.xxxx.se，请求的API地址为https://xxxx-private.xxx.se，二者根域名不一致，属于跨源请求；被请求的API服务响应中没有返回匹配当前前端源的Access-Control-Allow-Origin字段，因此触发浏览器同源策略的CORS拦截。

从你的代码看，请求写的是相对路径/products，说明你在axios的全局配置中给生产环境设置了指向https://xxxx-private.xxx.se/api/v1的baseURL，浏览器直接向该跨源地址发起请求，就会出现你看到的报错：

"Access to XMLHttpRequest at
'https://xxxx-private.xxx.se/api/v1/products' from origin
'https://xxxx-private.xxxx.se' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource."

按优先级从高到低可选择以下方案解决：

方案1：在API服务端配置CORS规则（最推荐） #

CORS限制是浏览器端的安全策略，只要API服务端明确声明允许当前前端源访问，拦截就会自动解除，这是最规范的解决方式：

• 登录API服务的部署控制台/服务器，给API响应添加以下CORS相关头：
  • Access-Control-Allow-Origin：值设置为你的生产环境前端地址https://xxxx-private.xxxx.se；如果接口需要携带cookie、认证头等凭证信息，不能将该值设为通配符*，需要动态匹配请求的Origin值
  • 如果请求涉及自定义头、或者使用GET/POST/HEAD之外的请求方法，还需要配套配置Access-Control-Allow-Methods、Access-Control-Allow-Headers字段，同时给OPTIONS预检请求返回200状态码
• 配置完成后，在浏览器网络面板查看API响应头，确认对应字段已正确返回即可。
• 如果之前已经配置过CORS，优先检查是否只加了本地开发源（比如http://localhost:3000），漏加了生产环境的前端域名。

方案2：生产环境配置反向代理（无需修改API服务） #

如果你没有API服务的修改权限，可以在部署前端的Web服务（Nginx、Caddy、Node服务等）上配置反向代理，让API请求和前端页面保持同源，从根源避免跨域，逻辑和你本地用的proxy完全一致：

• 以最常用的Nginx部署为例，在服务配置中添加路径转发规则：

location /api/ {
  proxy_pass https://xxxx-private.xxx.se/api/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

• 把生产环境axios配置中的baseURL改为相对路径/api，这样所有API请求会先发到当前前端域名下，由Nginx转发到真实API服务。服务端之间的请求不会触发浏览器CORS校验，因此不会出现跨域报错。
• 注意：如果你的前端是部署在不支持自定义路由规则的纯静态托管服务（比如普通对象存储、静态页托管平台），无法配置反向代理，这种情况只能选择方案1，或者单独搭建一个中转代理服务转发请求。

• 不要尝试在前端代码里添加CORS相关请求头、或者通过修改浏览器设置、安装插件的方式绕过跨域，这类方式仅能用于本地调试，生产环境面向普通用户访问时完全无效。
• 部署前先确认不同环境的axios配置是否正确，避免因为baseURL写错导致请求地址异常，可通过浏览器F12网络面板查看实际发出的请求地址，和预期值做比对。

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