I'm passing pagination information in response header and unable to get using following method in angular 8. I'm getting 0 all the time but in response showing diffrent value. Can anyone let me know where I made mistake?

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,
        })),
      );
  }

I'm passing pagination information in response header and unable to get using following method in angular 8. I'm getting 0 all the time but in response showing diffrent value. Can anyone let me know where I made mistake?

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.ponent.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));
}

Response Header Image

• javascript
• angular
• angular-httpclient
• response-headers

Share Improve this question Follow edited Feb 24, 2020 at 23:41 sideshowbarker♦ 88.4k2929 gold badges215215 silver badges212212 bronze badges asked Oct 2, 2019 at 6:26 SKLSKL 1,45366 gold badges3737 silver badges6060 bronze badges 6

• you are doing it right. can't see anything wrong – Joy Biswas Commented Oct 2, 2019 at 6:33
• yeah, weird. I dont know why can't get response header – SKL Commented Oct 2, 2019 at 6:38
• is it possible to put up a stackblitz with your api? – Joy Biswas Commented Oct 2, 2019 at 6:40
• @joyBlanks, I'll try. Need to bypass security layer. thanks – SKL Commented Oct 2, 2019 at 6:46
• 1 mocky.io try this. Use custom headers – Joy Biswas Commented Oct 2, 2019 at 6:48

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

You need to set Access-Control-Expose-Headers in your backend to expose your custom response headers.

Taken from Mozilla Docs on Access-Control-Expose-Headers:

The Access-Control-Expose-Headers response header indicates which headers can be exposed as part of the response by listing their names.

By default, only the 6 CORS-safelisted response headers are exposed:

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

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

Therefore, you have to code your backend to set Access-Control-Expose-Headers such that it returns:

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

OR

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. has set Access-Contorl-Expose-Headers to expose Etag but not X-Frame-Options: