如何獲取響應標頭 - 獲取響應標頭的問題

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：