React如何解决CORS头Access-Control-Allow-Origin为*时不支持Credentials错误

问题根源 #

W3C CORS规范明确规定：当跨域请求配置了withCredentials: true需要携带身份凭证（Cookie、HTTP 认证信息等）时，服务端响应头的Access-Control-Allow-Origin不允许使用通配符*，必须明确指定和请求来源完全匹配的域名，同时响应头必须携带Access-Control-Allow-Credentials: true，否则浏览器会直接拦截响应抛出跨域错误，这是浏览器的强制安全策略，无法通过前端代码直接绕过。

解决方案 #

后端调整（优先推荐，改动成本最低） #

仅需API提供方调整两个响应头配置即可：

• 去掉Access-Control-Allow-Origin: *的配置，改为明确的允许域名列表：可以读取请求头的Origin字段，和预设的白名单校验，匹配通过后直接将该Origin值设为Access-Control-Allow-Origin的响应值
• 新增响应头Access-Control-Allow-Credentials: true
  调整完成后你现有的Axios配置myApiRequest.defaults.withCredentials = true无需修改，即可正常请求。

前端侧替代方案（仅适用于后端无法调整的场景） #

不存在纯前端无依赖的解决方案，可通过代理转发绕开浏览器跨域限制：

• 本地开发阶段：在React的构建工具中配置代理规则，比如Vite可在vite.config.js中配置server.proxy，Webpack可在webpackDevServer.config.js中配置代理，将所有目标API的请求先转发到本地开发服务的路径，再由本地服务转发到第三方API地址，同源请求不会触发CORS校验，Cookie可正常携带
• 生产部署阶段：在前端应用的部署服务（如Nginx、CDN节点等）上配置反向代理，将匹配特定路径的请求转发到第三方API地址，同样绕开跨域限制

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