跨域响应Set-Cookie未被浏览器识别，前端无法设置refreshToken Cookie

我正在实现基于refreshToken的认证功能，需要前端存储后端发送的HTTP Cookie并在后续请求中回传，但目前遇到了问题：后端已正确返回Set-Cookie头部，但前端无法存储该Cookie，后续请求也无法携带它。

后端返回的Set-Cookie头部 #

Set-Cookie: refreshToken=someLongRefreshToken; Path=/; Expires=Thu, 19 Jan 2023 20:12:52 GMT; HttpOnly; SameSite=Lax

前端Axios配置 #

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300; // default (200 - 299);
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
    withCredentials: true,
  },
});

组件中调用示例：

let res = await axiosAuth.get('http://localhost:9922/someRoute');

补充信息 #

• Postman测试正常：登录后发送后续请求能正确获取并回传Cookie
• 浏览器响应头可见Set-Cookie，但Application/Cookies中无该Cookie记录
• 本地环境未启用HTTPS，Cookie未设置Secure属性
• 后端CORS配置（Go）：

r.Use(cors.Handler(cors.Options{
    AllowedOrigins:   []string{"http://localhost:3002"},
    AllowedMethods:   []string{"GET", "POST", "OPTIONS"},
    AllowedHeaders:   []string{"Accept", "Access-Control-Allow-Credentials", "Authorization", "WithCredentials", "Content-Type", "X-CSRF-Token", "SelectedGroup", "Allow-Credentials", "Cookie"},
    ExposedHeaders:   []string{"Set-Cookie"},
    AllowCredentials: true,
}))

问题排查与修复方案 #

1. 修正Axios的withCredentials配置位置 #

这是核心问题：你把withCredentials放在了headers对象里，但Axios中它是顶级配置项，不属于headers的属性。浏览器不会识别这个错误位置的配置，导致跨域请求时没有开启携带凭证的开关，自然不会存储Cookie。

正确配置如下：

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300;
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
  },
  withCredentials: true, // 移到顶级配置
});

2. 优化后端CORS配置 #

• 移除ExposedHeaders中的Set-Cookie：浏览器会自动处理Set-Cookie头部，不需要通过前端JS读取，这个配置多余
• 确保AllowedOrigins是精确的源（比如http://localhost:3002，不要加末尾的斜杠）
• 检查OPTIONS预检请求的响应，确认Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin（精确匹配前端域名）都正确返回

3. 验证修复效果 #

修改配置后重新测试：

1. 发送登录请求，查看Network面板的Response Headers，确认Set-Cookie存在
2. 打开浏览器开发者工具的Application > Cookies > localhost:9922，检查是否出现refreshToken
3. 发送后续请求，查看Request Headers，确认Cookie: refreshToken=xxx已携带

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