angular - 使用 Angular 4.3 的 HttpInterceptor 拦截 HTTP 响应头

Question

这是我发送HTTP 请求的方式:

return this.http.get(url, { observe: 'response' })

我想在我的 HttpInterceptor 中读取 HttpResponse 的 HTTP header :

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request)
            .do(event => {
                if (event instanceof HttpResponse) {
                    this.logger.logDebug(event); // Headers are missing here
                }
            })
            .catch((err: HttpErrorResponse) => {
            // Do stuff
    }
}

拦截器在我的 app.module.ts 中是这样提供的:

{ 提供:HTTP_INTERCEPTORS， 使用类:MyHttpInterceptor， 多:真

事件似乎没有标题，即使在 Chrome 开发控制台中我也看不到任何标题:

但是，当使用 Postman 时，我可以在响应中看到标题(如预期的那样)

Connection →keep-alive
Content-Length →14766
Content-Type →application/json
Date →Fri, 04 Aug 2017 14:50:46 GMT
Server →WildFly/10
X-Powered-By →Undertow/1

如何在 Angular 中显示这些 header ？

官方docs对于 HTTP 来说，要像这样获取 header :

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // You can inspect its headers:
    console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.
    console.log(resp.body.someField);
  });

Answer 1

我找到了答案。这(当然)是一个 CORS 问题。我正在使用 CORS Filter我需要明确公开我的自定义 header 。我希望这最终可以帮助其他人。