angular 6 获取拦截器内的响应标头答案

【问题标题】：angular 6 get Response headers inside interceptorangular 6 获取拦截器内的响应标头
【发布时间】：2019-07-07 10:52:39
【问题描述】：

无法在 Angular 6 拦截器服务中检索响应标头，尽管它在 chrome 控制台网络选项卡中可用。我找到了许多相同的解决方案并将其全部添加，但什么也没发生。我在我的 node.js 服务器中添加了Access-Control-Expose-Headers。

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization,Auth');
res.setHeader('Access-Control-Expose-Headers', 'Autho')

我也在使用 HTTPClient 模块作为 rest api。

Interceptor.ts 文件：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = sessionStorage.getItem('data');
const id = sessionStorage.getItem('id');
const re = '/login';
// if( !token)
 console.log(request.url);
// console.log(new URL(request.url).searchParams.get('userId'));

if (request.url.search(re) === -1) {
  request = request.clone({
    setHeaders: {
      Authorization: token,
      Auth: id
    }
  });
}
return next.handle(request).do((event: HttpEvent<any>) => {
  console.log(event);
  if (event instanceof HttpResponse) {
    // do stuff with response if you want
    console.log(event.headers);
    // console.log(response.headers);
    // console.log(HttpResponse.Headers);
  }
}, (err: any) => {
  if (err instanceof HttpErrorResponse) {
    console.log(err);
    if (err.status === 400) {
      // redirect to the login route
      // or show a modal
      console.log('ERROR');
      window.location.href = this.messageService.API_ROOT;
    }
  }
});
}

console.log(event.headers);什么都不打印。

rest-api.ts：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';


 const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
 };

  @Injectable({
     providedIn: 'root'
   })
 export class RestApiService {

 apiRoot = 'http://localhost:9005';

 constructor(private http: HttpClient) {
 }

  addModule(data) {
   return this.http.post(this.apiRoot + '/addModule', data, httpOptions);
 }

 getModules() {
   return this.http.get(this.apiRoot + '/getModules');
 }
}

服务器：

 res.setHeader('Autho','xxxxxxxxxxxxx');

像这样添加标题。如何在拦截器中获取 'Autho' 标头字段

【问题讨论】：

标签： angular interceptor

【解决方案1】：

我遇到了同样的问题，这篇文章是谷歌的第一个回复，但不包含我认为正确的答案。不知道 OP 如何设法使其与他们的解决方案一起工作。事实证明，由于 HttpClient 使用的是 XmlHttpRequest，因此需要存在一个“控制”标头，以允许 Angular 看到 Chrome 网络可以看到的标头。这篇文章有详细信息：Angular 2 http Observable request not returning response header

我将它添加到我的快递后端，一切都按预期工作（我正在做与@Subham 正在尝试的非常相似的事情。

这是 Angular 9.0.4

【讨论】：

【解决方案2】：

我通过将console.log(event.headers.get('Autho')); 放在console.log(event.headers); 之后的拦截器文件中解决了这个问题。我不知道确切的原因，但我认为 Angular 正在做一些延迟加载，它们只提供必要的数据，如响应体。所以只有当我们要求一些数据时，比如使用get('Autho')，他们才会提供这些数据。

更新了interceptor.ts：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = sessionStorage.getItem('data');
const id = sessionStorage.getItem('id');
const re = '/login';
// if( !token)
console.log(request.url);
// console.log(new URL(request.url).searchParams.get('userId'));

if (request.url.search(re) === -1) {
  request = request.clone({
    setHeaders: {
      Authorization: token,
      Auth: id
    }
  });
}
return next.handle(request).do((event: HttpEvent<any>) => {
  console.log(event);
  if (event instanceof HttpResponse) {
    // do stuff with response if you want
    console.log(event.headers);
    const jwt = event.headers.get('Autho');
    console.log(jwt);
    // console.log(response.headers);
    // console.log(HttpResponse.Headers);
  }
}, (err: any) => {
  if (err instanceof HttpErrorResponse) {
    console.log(err);
    if (err.status === 400) {
      // redirect to the login route
      // or show a modal
      console.log('ERROR');
      window.location.href = this.messageService.API_ROOT;
    }
  }
});
}

【讨论】：

【解决方案3】：

尝试像这样将标头转换为 HttpHeaders

....
    if (event instanceof HttpResponse) {
        let headers: HttpHeaders = event.headers
        console.log(headers.get('Autho')) 
    }
....

【讨论】：