CORS请求无法持久化Cookie问题排查求助

问题背景 #

通过axios发起跨域POST请求到https://example-be-app.com/auth/login，已配置withCredentials: true，响应状态码为200，响应头包含Set-Cookie字段，但客户端未将ACCESS_GRANTED和ACCESS_TOKEN持久化到Cookie存储中。本地环境功能正常，生产环境出现该问题，开发者工具无报错信息。

请求/响应详情 #

请求信息 #

Request URL: https://example-be-app.com/auth/login
Request Method: POST
Status Code: 200
Remote Address: 111.111.111.111:443
Referrer Policy: strict-origin-when-cross-origin

Request Headers:
:Authority: example-be-app.com
:Method: POST
:Path: /auth/login
:Scheme: https
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Content-Length: 55
Content-Type: application/json
Cookie: ACCESS_GRANTED=true; ACCESS_TOKEN=eyJhbGciOiJIUzIooooooooooooooppppppppppppppppxsLmNvbSIsIm5iZiI6MTY4Njc0MTk1OSwicm9sZXMiOlsiQWRtaW4iXSwiaXNzIjoiYXR0YWxhYiIsImV4cCI6MTY4NjgyODM1OSwiaWF0IjoxNjg2NzQxOTU5LCJ1c2VySWQiOjEsInVzZXJuYW1lIjoiZG1pdHJpakBhdHRhcG9sbC5jb20ifQ.H38oe1ORyjwO96-mHEk3FSWNUhUuJxTvcgft6eLR4vU
Origin: https://example-fe.com
Pragma: no-cache
Referer: https://example-fe.com/
Sec-Ch-Ua: "Not.A/Brand";v="8", "Chromium";v="114", "Google Chrome";v="114"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "Linux"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

响应信息 #

Response Headers:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example-fe.com
Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
Cache-Control: private
Content-Length: 109
Content-Type: application/json
Date: Wed, 14 Jun 2023 11:37:49 GMT
Expires: Wed, 14 Jun 2023 11:37:49 GMT
Server: Google Frontend
Set-Cookie: ACCESS_GRANTED=true; Max-Age=86400; Expires=Thu, 15 Jun 2023 11:37:49 GMT; Path=/; Secure; SameSite=None
Set-Cookie: ACCESS_TOKEN=eyJhbGciOiJIUzI1oooooooooooooopppppppppppppppp2xsLmNvbSIsIm5iZiI6MTY4Njc0MjY2OSwicm9sZXMiOlsiQWRtaW4iXSwiaXNzIjoiYXR0YWxhYiIsImV4cCI6MTY4NjgyOTA2OSwiaWF0IjoxNjg2NzQyNjY5LCJ1c2VySWQiOjEsInVzZXJuYW1lIjoiZG1pdHJpakBhdHRhcG9sbC5jb20ifQ.RGBIp6dkPyh5WW6-_RWgnoMBKxFBup6aJWJL99Y8zHc; Max-Age=86400; Expires=Thu, 15 Jun 2023 11:37:49 GMT; Path=/; Secure; HTTPOnly; SameSite=None
Vary: Origin
X-Cloud-Trace-Context: 73d7d15cda23525456456w341342fd5d5f

排查方向与解决方案 #

• 检查Secure属性与站点协议：响应中Cookie设置了Secure，仅HTTPS协议下才会存储。确认生产环境前端站点https://example-fe.com确实使用HTTPS，避免HTTP跳转导致的存储失败。
• 验证SameSite=None兼容性：SameSite=None必须搭配Secure（当前配置已满足），但旧版本浏览器对该属性支持有问题。可临时调整为SameSite=Lax测试排查，生产跨域场景仍推荐None。
• 确认axios配置有效性：检查全局axios配置是否开启withCredentials: true，避免单个请求配置被全局覆盖：

  // 全局配置示例
  axios.defaults.withCredentials = true;
  // 或实例化配置
  const apiInstance = axios.create({ withCredentials: true });
  apiInstance.post('/auth/login', requestData);
  

• 排查浏览器第三方Cookie拦截：现代浏览器默认可能拦截跨域第三方Cookie，需：
  • 让用户检查浏览器设置，关闭"阻止第三方Cookie"选项；
  • 尝试在Set-Cookie中添加Partitioned属性（Chrome 104+支持），配合Secure和SameSite=None规避拦截：

    Set-Cookie: ACCESS_GRANTED=true; Max-Age=86400; Expires=Thu, 15 Jun 2023 11:37:49 GMT; Path=/; Secure; SameSite=None; Partitioned
    

• 查看Network面板详情：在开发者工具Network面板中，点击该请求查看Set-Cookie的详细提示，浏览器会标注未存储的具体原因（如属性不兼容、域名不匹配等）。

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