Angular HttpClient缺少响应标头

Question

我最近试图陷入困境。我有一个分页的请求。

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.header仅包含实际http-response-header的子集。

这是标题对象的样子

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

我确定X-Total-Count已发送。Firefox devtools展示了它。您能否告诉我如何将其纳入响应中？

更新

这个问题与通过以下方式被确定为重复项的问题有所不同：我没有问过如何检查完整的httpResponse。我自己弄清楚了。我一直在问为什么headers响应的属性不完整。

Answer 1

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

Answer 2

CORS请求仅公开6个安全列出的标头：Cache-Control Content-Language Content-Type Expires Last-Modified＆Pragma。

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

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

MDN来源