如何获取响应标头 - 获取响应标头的问题

Question

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

应用服务.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)); }

响应 Header 图像

Answer 1

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

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

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

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

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

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

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

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

或者

Access-Control-Expose-Headers: *

Here's a simple stackblitz for you to explore, you can observe in the StackBlitz's console that I can retrieve Etag headers but not X-Frame-Options because https://api.github.com has set Access-Contorl-Expose-Headers to expose Etag 但不是 X-Frame-Options：