如何以角度读取 Http 响应标头

Posted 2023-02-19

【中文标题】如何以角度读取 Http 响应标头

【英文标题】：How to read Http response header in angular

【发布时间】：2019-03-14 02:59:49

【问题描述】：

这是我的角度服务类代码。我在这个类中调用了restful web服务，响应来了。响应标头具有 JWT Web 令牌我想在此 authUser 服务函数中读取响应标头并获取 JWT Web 令牌。怎么办？

import  Injectable  from '@angular/core';
import ResponseBeanModule from '../../module/responsebean/responsebean.module';
import  Http, Headers, Response  from '@angular/http';


@Injectable(
  providedIn: 'root'
)
export class AuthenticationService 
  constructor(private http: Http)  this._prepare()
  private userUrl = 'http://192.168.1.152:8080/api/user/';

  endpointUrl: String;
  responseBeanModule: ResponseBeanModule = new ResponseBeanModule();
  options: any;
  headers: any;

  _prepare () 
    this.endpointUrl = this.userUrl;
    this.headers = new Headers();
    this.headers.set('Content-Type', 'application/json');
    this.options = 
      headers: this.headers,
      observe: 'body'
    ;
  



  public authUser(loginBean): Promise<ResponseBeanModule> 
    return new Promise((resolve, reject) => 
      this.http.post(this.userUrl, loginBean, this.options).subscribe(
        (data) => 
         alert(JSON.stringify(data));
         this.responseBeanModule = JSON.parse(data['_body'])
          return resolve( this.responseBeanModule );
        ,
        (err) => 
          return reject(err);
        
      );
    );

  

【问题讨论】：

这看起来很糟糕。首先，您应该更正调用服务的方式。对于初学者，使用 httpClient，使用 observable 代替 promise 等

请看官方文档。 angular.io/guide/http 并使用 HttpClient。 Http 已被弃用多年。我也认为没有理由使用承诺。完成该部分后，请查看如何从与上述相同的链接中读取标题（使用HttpClient，而不是Http 时）。这里是确切的部分：angular.io/guide/http#reading-the-full-response 未来，请先阅读文档:)

我注意到您正在发帖。我还想发布并在对象中找到响应标头。我尝试在 HttpClient.post() 函数调用中使用“响应”来使用观察选项——它有点工作，但是......我在 github 上记录了一个关于这个的问题，github.com/angular/angular/issues/44127 所以我希望对此有一些吸引力回答甚至是错误修复！

【参考方案1】：

要么这是 Angular 的 HttpClient 的一个坏特性，要么他们从来没有打算让你阅读比 Content-Type 和 Content-Length 更多的标题 -- 我只能使用 HTTP POST 或 HTTP GET 读取这些标头：

  login(username = "", password = "") 
    return this.httpClient
      .post(`$environment.apiLocationredfish/v1/SessionService/Sessions`,
         username, password ,
        observe: 'response')
      .pipe(
        map(response => 
          const keys = response.headers.keys();
          let headers = keys.map(key =>
            `$key: $response.headers.get(key)`);
          this.logger.log('response headers', headers);