Response Header Set-Cookie无法在浏览器存储Cookie问题求助

CORS 配置必查项 #

• 前端请求必须开启凭证携带：用Axios的话设置 axios.defaults.withCredentials = true，原生XHR则设 xhr.withCredentials = true；后端CORS必须返回 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能用 *，得指定前端具体域名（比如部署后的https://your-frontend.com，本地是http://localhost:3000）。
• 跨域场景下Cookie必须设 SameSite=None，同时搭配 Secure 属性——本地开禁用缓存后，浏览器对HTTP环境的Secure校验更严，可能导致Cookie被拦截。

Cookie 属性配置检查 #

• refreshToken Cookie：部署后如果前端是HTTPS，后端必须也是HTTPS，否则带Secure的Cookie不会被存储；本地禁用缓存时，HTTP环境下的SecureCookie大概率会被浏览器拒绝。
• JS可访问的Cookie：确保没加HttpOnly属性，同时Path设为/，避免路径限制导致Cookie无法在页面中读取。

部署环境额外校验 #

• 前后端域名要匹配Cookie的Domain设置：比如后端是api.yourdomain.com，前端是www.yourdomain.com，Cookie的Domain得设为.yourdomain.com，否则浏览器会拒绝存储。
• 禁止混合内容：前端用HTTPS的话，后端必须也用HTTPS，否则浏览器会拦截所有HTTP请求返回的Cookie。

调试技巧 #

• 打开浏览器开发者工具「Application」面板，查看「Cookies」标签，确认响应头里的Set-Cookie是否存在，鼠标悬停在未存储的Cookie上能看到具体拒绝原因。
• 检查请求头的Origin字段，确认后端返回的CORS响应头与Origin匹配。

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