Как получить заголовки ответа - проблема с получением заголовков ответа в угловых

Question

Я передаю информацию о нумерации страниц в заголовке ответа и не могу использовать следующий метод в угловом коде 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 на Access-Control-Expose-Headers :

Заголовок ответа Access-Control-Expose-Headers указывает, какие заголовки могут быть отображены как часть ответа путем перечисления их имен.

По умолчанию отображаются только 6 заголовков ответа, сохраненных в CORS-списке:

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

Если вы хотите, чтобы клиенты имели доступ к другим заголовкам, вы должны перечислить их, используяЗаголовок Access-Control-Expose-Headers.

Следовательно, вы должны закодировать свой бэкэнд для установки Access-Control-Expose-Headers так, чтобы он возвращал:

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

ИЛИ

Access-Control-Expose-Headers: *

Вот простой stackblitz для вас, вы можете наблюдать в консоли StackBlitz, что я могу получить заголовки Etag, но нет X-Frame-Options, потому что https://api.github.com установил Access-Contorl-Expose-Headers чтобы выставить Etag, но не X-Frame-Options: