会话Cookie已设置但XSRF-TOKEN未在AngularJS前端浏览器中生效

嘿，我之前也踩过类似的坑——后端明明返回了Set-Cookie头，浏览器就是不存Cookie，导致AngularJS后续请求拿不到XSRF-TOKEN。结合你的场景，大概率是Cookie属性或跨域（CORS）配置没到位，咱们一步步排查：

1. 检查Cookie的核心属性设置 #

浏览器现在对Cookie的安全性限制越来越严，尤其是跨域场景下，这几个属性必须配置对：

• SameSite: 如果你的前端和后端是跨域部署，必须设为None，同时搭配Secure属性（浏览器要求SameSite=None的Cookie必须是HTTPS传输）。如果是本地HTTP开发，可以暂时设为Lax或Strict并去掉Secure，但生产环境一定要改回None + Secure。
• HttpOnly: 千万别给XSRF-TOKEN加这个属性！AngularJS需要读取Cookie里的XSRF-TOKEN值，然后自动放到请求头X-XSRF-TOKEN里，HttpOnly会禁止JS读取Cookie，直接导致Angular拿不到值。
• Path: 建议设为/，确保整个域名下的前端页面都能访问到这个Cookie，避免因路径限制导致无法读取。

正确的Set-Cookie头示例：

Set-Cookie: XSRF-TOKEN=your-token-value; Path=/; SameSite=None; Secure

2. 确认跨域（CORS）配置是否正确 #

如果前端和后端域名不同，后端必须配置以下CORS响应头：

• Access-Control-Allow-Credentials: true：允许浏览器携带Cookie跨域请求。
• Access-Control-Allow-Origin：不能设为*，必须是你的前端具体域名（比如http://localhost:4200或https://your-frontend.com），因为带Credentials的请求不支持通配符。

同时，AngularJS端要全局开启withCredentials，让$http请求自动携带Cookie：

angular.module('yourAppName')
  .config(['$httpProvider', function($httpProvider) {
    // 全局设置所有请求携带Credentials
    $httpProvider.defaults.withCredentials = true;
  }]);

3. 验证响应头的格式正确性 #

打开浏览器开发者工具的Network面板，找到登录请求，查看Response Headers里的Set-Cookie字段：

• 确保格式没有语法错误（比如多个Cookie用分号分隔，没有多余空格）。
• 确认XSRF-TOKEN的Cookie确实存在于响应头中。

4. 本地开发的特殊处理 #

如果是本地HTTP环境（非HTTPS），Chrome等浏览器会拒绝SameSite=None的Cookie，这时候可以临时把SameSite设为Lax，并去掉Secure属性，等部署到HTTPS生产环境再改回来。

按照上面的步骤排查，应该就能解决Cookie不生效的问题了！

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