如何获取响应头-以角度获取响应头的问题

Question

我在响应头中传递了分页信息，并且无法在angular 8中使用以下方法。我一直在获取0，但响应中显示出不同的值。谁能让我知道我在哪里犯错了？

app.service.ts

  indexBooking(perPage: number, page: number) {
    return this.http
      .get<any[]>(`${this.apiBaseUrl}/prices`, {
        params: formatParameters({perPage, page}),
        observe: 'response',
      })
      .pipe(
        map((res) => ({
          max: Number.parseInt(res.headers.get('x-total-count'), 10) || 0,
          index: Number.parseInt(res.headers.get('x-next-page'), 10) || 0,
          page: Number.parseInt(res.headers.get('x-per-page'), 10) || 20,
          items: res.body,
        })),
      );
  }

app.component.ts

ngAfterViewInit() {
  merge(this.paginator.page)
    .pipe(
      startWith({}),
      switchMap(() => {
        return this.bookingService.indexBooking(this.paginator.pageSize, this.paginator.pageIndex);
      }),
      map((data) => {
        console.log('data', data);
        this.resultsLength = data.items.length;
        return data.items;
      }),
      catchError(() => {
        return observableOf([]);
      }),
    )
    .subscribe((data) => (this.data = data));
}

响应标题图片

Answer 1

您需要在后端设置Access-Control-Expose-Headers，以显示您的自定义响应标头。

取自Mozilla Docs on Access-Control-Expose-Headers：

  

Access-Control-Expose-Headers响应标头通过列出其标头指示哪些标头可以作为响应的一部分公开。

     

默认情况下，仅公开6个CORS安全列出的响应标头：

     

缓存控制，内容语言，内容类型，过期时间，最后修改时间，语用

     

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

因此，您必须对后端进行编码以设置Access-Control-Expose-Headers使其返回：

Access-Control-Expose-Headers: x-total-count, x-next-page, x-per-page

OR

Access-Control-Expose-Headers: *

这里有一个简单的stackblitz供您浏览，您可以在StackBlitz的控制台中观察到我可以检索Etag标头，但不能 X-Frame-Options，因为https://api.github.com具有设置Access-Contorl-Expose-Headers公开Etag，但不公开X-Frame-Options：