为何Angular中response.headers与浏览器开发者工具响应头不一致？

问题根源 #

• 跨域CORS限制：跨域请求时，浏览器默认不会将Set-Cookie这类敏感响应头暴露给前端JS，必须后端显式配置允许暴露该头。
• HttpOnly Cookie属性：若后端设置的Cookie带有HttpOnly标记，浏览器会禁止JS访问该Cookie，此时前端无法通过代码获取，这是浏览器的安全机制。

具体解决方案 #

1. 配置CORS与请求凭证 #

后端配置

在登录接口的响应头中添加以下配置：

Access-Control-Expose-Headers: Set-Cookie
Access-Control-Allow-Credentials: true

Angular请求修改

开启请求的withCredentials选项，确保浏览器正常处理Cookie：

this.http.post(this.url+"/login", formData, { withCredentials: true }).subscribe(
  (response: any) => {
    console.log(response.headers.get('Set-Cookie'));
    // 后续Cookie处理逻辑...
  }
);

2. 检查HttpOnly属性 #

查看浏览器开发者工具中Cookie的HttpOnly状态：

• 若HttpOnly已勾选：前端无法通过JS获取该Cookie，浏览器会自动在后续同域请求中携带，无需手动处理。
• 若需前端操作Cookie：后端需移除HttpOnly标记（不推荐，会增加XSS攻击风险）。

额外提示 #

非跨域场景下仍无法获取时，检查请求是否设置了responseType为text/blob等特殊类型，这类情况Angular可能不会自动解析响应头，需调整为默认的json类型或手动处理响应。

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