Angular HttpClient 缺少响应标头答案

【问题标题】：Angular HttpClient missing response headersAngular HttpClient 缺少响应标头
【发布时间】：2019-02-25 20:41:48
【问题描述】：

我最近正在尝试进入 Angular。我有一个分页请求。

const myParams = new HttpParams().set('page', page.toString()).set('size', size.toString());
this.http.get<HttpResponse<User[]>>('https://localhost:8443/user/', {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
      params: myParams,
      observe: 'response'
    }).suscribe((response: HttpResponse<User[]>) => this.data = response.body);

DB 中的元素总数在X-Total-Count 标头中传输给客户端。我试着这样读：

.suscribe((response: HttpResponse<User[]>) => {
    this.data = response.body;
    this.totalCount = response.headers.get('X-Total-Count');
});

但这不起作用。事实证明，response.headers 仅包含真实 http-response-headers 的子集。

这就是 headers 对象的样子

"headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  }

我确定 X-Total-Count 已发送。 Firefox devtools 显示它。您能告诉我如何将其包含在响应中吗？

更新

这个问题与被识别为重复的问题有以下不同之处：我没有问过如何检查完整的 httpResponse。我自己想出来的。我一直在问为什么Response的headers属性不完整。

【问题讨论】：

很遗憾地通知您，这不是您提到的帖子的复制品。如您所见，我使用了您链接的答案中的方法。 observe: 'response'。我的问题是 response.headers 不包含 all 后端发送的标头。
对不起，你是对的！

标签： angular angular6 angular-httpclient

【解决方案1】：

就我而言，Postman 能够获取自定义的“Authorization”标头，但 Angular 不能。我通过显式公开自定义标头解决了它

@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    // vvv
    config.addExposedHeader(HttpHeaders.AUTHORIZATION);
    // ^^^
    config.addAllowedMethod(HttpMethod.OPTIONS);
    config.addAllowedMethod(HttpMethod.GET);
    config.addAllowedMethod(HttpMethod.POST);
    config.addAllowedMethod(HttpMethod.PUT);
    config.addAllowedMethod(HttpMethod.PATCH);
    config.addAllowedMethod(HttpMethod.DELETE);
    config.setMaxAge(1800L);
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

【讨论】：

【解决方案2】：

正如 Tsvetan Ganev 之前所说，如果这是 CORS 请求，您需要在 Access-Control-Expose-Headers 标头中按名称显式公开所需的标头。为此，您需要配置应用程序服务器，例如在 Spring 中使用 WebMvcConfigurer 时，您可以公开以下标头：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")
                .allowedOrigins("*")
                .exposedHeaders("X-Total-Count")
                .allowedMethods("*");
    }
}

使用此配置，您的浏览器，超过 7 个默认标头：

Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma

还将为您的应用程序公开 X-Total-Count 标头。

【讨论】：

【解决方案3】：

CORS 请求仅公开 6 个列入安全列表的标头：Cache-Control Content-Language Content-TypeExpiresLast-Modified&Pragma。

为了通过 CORS 请求访问自定义标头，服务器必须明确将它们列入白名单。这可以通过发送响应头来完成：Access-Control-Expose-Headers

例如： Access-Control-Expose-Headers: X-Total-Count, X-Paging-PageSize

MDN Source

【讨论】：

天哪，我刚刚从一个老鼠洞里爬出来。谢谢你的回答。如果您使用的是烧瓶 CORS，只需设置公开标头选项，您就可以了

【解决方案4】：

HttpResponse 对象中的标头是延迟加载的，因此在您强制加载值之前，headers 将显示为空。尝试调用response.headers.keys() 以查看所有可用的标头名称。顺便说一句，这也强制将所有值加载到映射response.headers.headers。

【讨论】：

如果您没有使用 CORS，那么这是正确的答案。如果我可以投票更多，我会！！！

【解决方案5】：

尝试将withCredentials: true 添加到 http 选项对象。

【讨论】：