Angular4技术求助：如何在组件中获取响应头？

我明白你现在的困扰——想把接口返回的响应头拿到组件里却一直没成功，这其实是Angular HTTP客户端的一个常见细节，我来一步步帮你搞定：

1. 先搞定服务端的响应头暴露配置 #

默认情况下，浏览器只会允许前端访问几个标准响应头（比如Content-Type）。如果你的响应头是自定义的（比如Location、X-Film-Id这类），必须让后端配置Access-Control-Expose-Headers响应头，把你需要获取的头名称明确列出来。

举个后端示例（以Node.js/Express为例）：

res.header('Access-Control-Expose-Headers', 'X-Film-Id, Location');
res.header('X-Film-Id', '12345'); // 你的自定义响应头
res.status(201).send(createdFilmData);

2. 修改Angular服务代码，获取完整响应 #

如果你用的是Angular 4推荐的HttpClient模块，需要在请求里设置observe: 'response'，这样就能拿到包含头信息的完整HttpResponse对象，而不是只返回响应体。

修改后的服务代码示例：

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class FilmService {
  constructor(private http: HttpClient) {}

  create(film: any): Observable<HttpResponse<any>> {
    return this.http.post<HttpResponse<any>>(
      '/api/films', // 替换成你的实际接口地址
      film,
      { observe: 'response' } // 关键配置：告诉HttpClient返回完整响应
    );
  }
}

如果你的项目还在使用旧版Http模块（Angular 4也兼容），可以这样写：

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class FilmService {
  constructor(private http: Http) {}

  create(film: any): Observable<Response> {
    return this.http.post('/api/films', film);
  }
}

3. 在组件中提取响应头 #

现在回到你的组件代码，订阅请求时就能拿到完整响应，然后直接提取头信息：

用HttpClient的情况： #

this.filmService.create(this.film).subscribe(
  (response: HttpResponse<any>) => {
    console.log('响应体内容:', response.body);
    // 获取自定义响应头，比如X-Film-Id
    const filmIdHeader = response.headers.get('X-Film-Id');
    console.log('新创建的Film ID:', filmIdHeader);
    
    this.alertMessage = {
      "text": "Film has been created successfully!",
      "class": "success",
      "display": true
    };
    // this.addFilmIntoDubberSelected();
  },
  err => {
    this.alertMessage = {
      "text": "Error occured!",
      "class": "danger",
      "display": true
    };
  }
);

用旧版Http模块的情况： #

this.filmService.create(this.film).subscribe(
  (response: Response) => {
    console.log('响应体内容:', response.json());
    const filmIdHeader = response.headers.get('X-Film-Id');
    console.log('新创建的Film ID:', filmIdHeader);
    
    this.alertMessage = {
      "text": "Film has been created successfully!",
      "class": "success",
      "display": true
    };
    // this.addFilmIntoDubberSelected();
  },
  err => {
    this.alertMessage = {
      "text": "Error occured!",
      "class": "danger",
      "display": true
    };
  }
);

关键检查点 #

如果还是拿不到头信息，先打开浏览器的Network面板：

• 确认响应头确实存在于接口返回中
• 确认后端已经正确配置了Access-Control-Expose-Headers

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