Chrome浏览器中响应携带的Cookie无法正常设置存储问题求助

1. 前端axios配置调整 #

• 必须开启withCredentials属性，支持全局配置或单次请求指定：
  全局配置示例：

  axios.defaults.withCredentials = true
  

  单次请求配置示例：

  axios.post('http://localhost:5000/目标接口路径', {
    // 请求参数
  }, {
    withCredentials: true
  })
  

2. 后端跨域配置调整 #

• Access-Control-Allow-Origin禁止设置为*，必须精确匹配前端源地址：http://localhost:3000
• 必须显式设置Access-Control-Allow-Credentials为true
• 不要拦截OPTIONS预检请求，OPTIONS请求的响应头也需要包含上述两个跨域配置项

3. 响应Cookie属性要求 #

• Domain属性值要匹配两个服务的域名，localhost场景可省略不填，或直接填localhost，禁止填写不相关域名
• Path属性设为/即可全局生效，不要限制到后端专属路径导致前端无法匹配
• SameSite属性：本地开发场景建议设为Lax，如果必须设为None，要同步开启Secure属性
  注意：Chrome允许localhost环境下携带Secure属性的Cookie通过HTTP协议传输，非localhost的生产环境如果开启Secure，必须使用HTTPS协议
• 非HTTPS的生产环境不要添加Secure属性，否则Cookie会被浏览器直接拦截
• 不要将Expires/Max-Age设为已过期的时间值，否则Cookie不会被存储

4. 问题排查方式 #

配置完成后重新发起请求，打开Chrome网络面板对应请求的「Cookie」标签页，开启「显示被阻止的Cookie」开关，可查看具体拦截原因，对应调整配置即可。

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