Angular HttpClient missing response headers

Question

I am trying to get into angular lately. I have a paginated request.

const myParams = new HttpParams().set('page', page.toString()).set('size', size.toString());
this.http.get<HttpResponse<User[]>>('https://localhost:8443/user/', {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
      params: myParams,
      observe: 'response'
    }).suscribe((response: HttpResponse<User[]>) => this.data = response.body);

The total count of elements in the DB is transfered to the Client in the X-Total-Count header. i tried to read it like that:

.suscribe((response: HttpResponse<User[]>) => {
    this.data = response.body;
    this.totalCount = response.headers.get('X-Total-Count');
});

But this does not work. It turns out that response.headers only includes a subset of the real http-response-headers.

this is what the headers object looks like

"headers": {
    "normalizedNames": {},
    "lazyUpdate": null
  }

I am sure that X-Total-Count has been sent. Firefox devtools show it. Could you please tell me how to include it into the response?

UPDATE

This question differs from the one that has been identified as a duplicate in the following way: I have not been asking about how to inspect the full httpResponse. I figured that out on my own. I have been asking about why the headers attribute of the Response is not complete.

I am sorry to inform you that this is not a replica of the post you have mentioned. As you can see, I have used the approach from the answer you have linked. observe: 'response'. My Problem is that response.headers does not contain all the headers that have been sent by the backend. — Mr.H.
– Mr.H., Commented Sep 21, 2018 at 12:50

Matthieu Riegler · Accepted Answer · 2019-11-28 14:15:38Z

127

CORS requests only expose 6 safelisted headers : Cache-Control Content-Language Content-Type Expires Last-Modified & Pragma.

In order to access custom headers with a CORS request, the server has to explicitly whitelist them. This can be done by sending the response header: Access-Control-Expose-Headers

For example: Access-Control-Expose-Headers: X-Total-Count, X-Paging-PageSize

MDN Source

edited Nov 28, 2019 at 14:15

Matthieu Riegler

59.8k27 gold badges158 silver badges208 bronze badges

answered Sep 21, 2018 at 13:07

Tsvetan Ganev

8,9164 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

activedecay Over a year ago

holy lord what a rathole i just crawled out of. thank you for this answer. if you're using flask CORS, just set the expose header options and you're golden

John McCann Over a year ago

In my case I added this on the ASP.NET Core server side CORS policy setup services.AddCors(o => o.AddPolicy("CorsPolicy", builder => { builder .AllowAnyHeader() .WithOrigins(origins) .WithExposedHeaders(new string[] { "X-Total-Count" }) .AllowCredentials(); }));

Quido Over a year ago

For those of you that are looking how to add thes headers to a (.NET 6) ASP.NET Web API: use .WithExposedHeaders("X-Total-Count") on the CORS policy.

Sam H · Accepted Answer · 2019-09-11 06:52:04Z

27

The headers in an HttpResponse object are lazy-loaded, so headers will appear to be empty until you force the values to be loaded. Try calling response.headers.keys() to see all available header names. By the way, this also forces all values to be loaded into the map response.headers.headers.

edited Sep 11, 2019 at 6:52

answered Sep 11, 2019 at 6:46

Sam H

9188 silver badges17 bronze badges

1 Comment

Lee Willis Over a year ago

If you are not using CORS then this is the correct answer. If I could upvote more I would!!!

Igor Masliansky · Accepted Answer · 2019-03-07 21:42:18Z

3

Try to add withCredentials: true to the http options object.

answered Mar 7, 2019 at 21:42

Igor Masliansky

411 bronze badge

Comments

bladekp · Accepted Answer · 2020-11-13 14:17:24Z

As Tsvetan Ganev stated before, if this is CORS request you need to explicity expose required headers in Access-Control-Expose-Headers header by name. To achieve this you need to configure your application server, for example in Spring while using WebMvcConfigurer you can expose headers like:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")
                .allowedOrigins("*")
                .exposedHeaders("X-Total-Count")
                .allowedMethods("*");
    }
}

Using this configuration, your browser, beyond 7 default headers:

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

Will expose X-Total-Count header for your application as well.

Richard · Accepted Answer · 2020-12-21 18:35:17Z

1

In my case, Postman was able to fetch the custom "Authorization" header, but Angular wasn't. I solved it by explicitly exposing the custom header

@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    // vvv
    config.addExposedHeader(HttpHeaders.AUTHORIZATION);
    // ^^^
    config.addAllowedMethod(HttpMethod.OPTIONS);
    config.addAllowedMethod(HttpMethod.GET);
    config.addAllowedMethod(HttpMethod.POST);
    config.addAllowedMethod(HttpMethod.PUT);
    config.addAllowedMethod(HttpMethod.PATCH);
    config.addAllowedMethod(HttpMethod.DELETE);
    config.setMaxAge(1800L);
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

answered Dec 21, 2020 at 18:35

Richard

5965 silver badges12 bronze badges

1 Comment

Ian Newland Over a year ago

Had the same issue with Angular. I could see them in the response header in the browser inspector, but Angular couldn't read them. Exposing the header on the server solved it. Thanks for the tip.

Collectives™ on Stack Overflow

Angular HttpClient missing response headers

5 Answers 5

3 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related