Angular 10发起POST请求后无法获取响应自定义头部问题咨询

1. 核心问题1：未配置获取完整响应对象 #

Angular HttpClient 默认仅返回接口响应体，要读取响应头必须先在请求配置中添加 observe: 'response' 参数，修改你的httpOptions如下：

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  withCredentials: false,
  observe: 'response' // 新增该配置，返回完整响应对象（含头、状态码等）
};

2. 核心问题2：读取响应头的逻辑错误 #

你原有代码的两处取值逻辑完全不成立：

• data.headers.get('X_Custom_header')：默认data是响应体，没有headers属性
• httpOptions.headers.get('X_Custom_header')：httpOptions.headers是你主动设置的请求头，不可能包含接口返回的响应头字段

修改订阅逻辑如下：

const postedData = { userId : this.f.username.value, password : this.f.password.value, token: "string" };
// 泛型对应响应体的类型，仍用any做示例
this.http.post<any>("https://localhost:44365/api/v1/Credential/", postedData, httpOptions)
.subscribe(
  // 现在返回的是完整响应对象，包含body（响应体）、headers等属性
  response => {
    this.currentUser = response.body;
    // 从响应对象的headers属性取自定义头
    const token = response.headers.get('X_Custom_header');
    console.log('自定义头取值：', token);
    this.loading = false;
  },
  error => {
    this.loading = false;
    // 补充异常处理逻辑
  }
)

3. 后端必做配置（跨域场景必填） #

如果你的前端和接口域名/端口不一致属于跨域请求，必须要求后端在响应头中添加：
Access-Control-Expose-Headers: X_Custom_header
未配置该字段时，浏览器会禁止JS读取非默认安全响应头，这也是你在Network面板能看到头、但代码拿不到的核心原因。

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