Question

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

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

我想在我的HttpInterceptor中读取HttpResponse 的HTTP标头：

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， useClass：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中显示这些标题？

HTTP的官方docs说要获得这样的标题：

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，我需要明确地公开我的自定义标题。我希望这最终可以帮助别人。

Answer 2

要查看标题，请访问响应中的“标题”。标题似乎被懒惰地评估，因此它们是不可见的。我想只有在使用res.headers.keys()明确要求时才会对标头进行评估。但是，您可以使用yourFunction.subscribe((res:HttpResponse<any>)=>{console.log('response from server:',res); console.log('response headers',res.headers.keys()) } );获取响应中的标头列表。例如

$array = [1, 2, 3, 4];
$teams = 2;
$result = array_chunk(shuffle($array), sizeof($array) / $teams)

Answer 3

看起来像服务器端CORS过滤器配置。

默认情况下，只显示6个简单响应标头：


缓存控制

内容的语言

内容类型

到期

上次修改

附注


如果您希望客户端能够访问其他标头，您必须这样做   使用Access-Control-Expose-Headers标题列出它们。

来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Answer 4

与Angular无关。问题是默认情况下CORS限制了标头，并且在调用CORS请求时看不到“ X-Custom-Header ”标头。因此，请调整服务器以使其发送X-Custom-Header。

为响应OPTIONS请求（飞行前），必须提供Access-Control-Allow-Header。

必须提供Access-Control-Expose-Header以响应POST / GET请求。

Access-Control-Expose-Headers：X-Custom-Header

使用Angular 4.3的HttpInterceptor

4 个答案: