Axios调用返回302状态码触发CORS跨域问题，首次请求失败刷新后正常求助

核心问题分析 #

1. 请求头设置错误：你在Axios请求里添加的Access-Control-Allow-Origin是服务器响应头，客户端发送这个头完全无效，浏览器只会校验服务器返回的该字段。
2. 重定向目标未配置CORS：首次请求时，https://authclient.com的响应没有返回允许https://web.com跨域的CORS头，导致浏览器拦截请求。刷新后正常是因为认证Cookie已存在，后续请求无需重定向到authclient.com，绕过了这一步的CORS检查。

解决方案 #

1. 修正Axios请求配置 #

去掉无效的请求头，同时如果需要携带认证Cookie，必须开启withCredentials（这一步很关键，因为authclient.com要在浏览器设置Cookie）：

axios.get("https://api.com/validate", {
  withCredentials: true // 允许携带跨域Cookie
})
.then(response => {
  // 处理响应逻辑
})
.catch(error => {
  // 处理错误逻辑
});

2. 配置后端服务的CORS规则 #

针对https://api.com

• 必须返回Access-Control-Allow-Origin: https://web.com（不能用*，因为要携带Cookie）
• 返回Access-Control-Allow-Credentials: true
• 允许必要的请求方法和头信息，比如GET、Content-Type等

针对https://authclient.com

这是解决首次请求报错的关键：

• 返回Access-Control-Allow-Origin: https://web.com
• 返回Access-Control-Allow-Credentials: true
• 确保这些头在302重定向响应中也能正确返回

3. 验证重定向流程 #

确认authclient.com重定向回https://api.com时，api.com的后续响应依然携带正确的CORS头，避免二次拦截。

为什么浏览器CORS插件无效？ #

部分CORS插件仅拦截初始请求的CORS检查，但对重定向后的请求可能无法生效，尤其是涉及Cookie认证的场景，必须依赖后端正确配置CORS规则。

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