Question

虽然在chrome控制台网络选项卡中可用，但无法在angular 6拦截器服务中检索响应头。我发现了很多解决方案，并添加了所有解决方案，但没有任何反应。我在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”标题字段

Answer 1

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

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

这是Angular 9.0.4的版本

Answer 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;
    }
  }
});
}

拦截器内有角6获取响应头

2 个答案: