Angular使用HttpClient为何仅获取到两个响应头？

云原生阿岚

2026-7-21

问题原因及解决方案

核心原因：浏览器CORS限制

你遇到的问题是浏览器的CORS同源策略限制导致的：

Postman、curl这类工具不受浏览器同源策略约束，所以能拿到全部响应头；
浏览器会默认屏蔽非"简单响应头"的访问，只有少数预定义的头（如Content-Type、Cache-Control）能被前端JavaScript直接读取，其他自定义头或非简单头需要后端明确配置允许暴露。

两步解决

1. 后端配置响应头暴露

在你的后端服务（localhost:8080）中，添加Access-Control-Expose-Headers响应头，指定需要让前端访问的响应头。例如：

如果要暴露特定头（比如Authorization、X-Token）：
```
Access-Control-Expose-Headers: Authorization, X-Token
```
如果要临时暴露所有头（生产环境不推荐，建议明确指定）：
```
Access-Control-Expose-Headers: *
```

具体配置方式取决于你的后端框架（Spring Boot、Express等），比如Spring Boot可以通过@CrossOrigin注解或者全局CORS配置来设置。

2. 前端正确读取响应头

不要直接用JSON.stringify(res.headers)，因为Angular的HttpHeaders是封装类，直接序列化只能拿到内部属性。应该用它提供的API来读取：

this.http.post<User>(this.url, user, {
  observe: 'response',
  responseType: 'json',
})
.subscribe((res) => {
  // 获取所有响应头的键
  const headerKeys = res.headers.keys();
  // 遍历打印所有头
  headerKeys.forEach(key => {
    console.log(`${key}: ${res.headers.get(key)}`);
  });
});