Angular2: how to get custom response headers (CORS issue)

Question

Why can't I access ALL headers in Angular2 from the response?

I have a legacy webservice which I can't modify. It sends some i,mportant information back to the client in the Response headers. Don't ask me why. this is crap.

my code is this:

      .subscribe((r: Response) => {
      var customHeader = r.headers.get("Database-Deleted");
      var allHeadersAsString = JSON.stringify(r.headers);

but seems the response contains only a few headers, not all of them.

Can someone tell me this is by design and there is no way to access them? (or even better: tell me how to make it work)

UPDATE

Thanks top the comments I was able to identify it as a CORS issue. The accepted answers of other questions did not give me the right clue.

THANKS!

Possible duplicate of [Restrictions of XMLHttpRequest's getResponseHeader()?](http://stackoverflow.com/questions/7462968/restrictions-of-xmlhttprequests-getresponseheader) — n00dl3, Mar 28 '17 at 10:29
take a look at the “Cross-Origin Resource Sharing specification" of the answer : "specification forbids access to any response header field other except the simple response header fields (i.e. Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, and Pragma)" — n00dl3, Mar 28 '17 at 10:33
Possible duplicate of [How to get all the headers from an Angular 2 response?](http://stackoverflow.com/questions/42306684/how-to-get-all-the-headers-from-an-angular-2-response) — Paul Samsotha, Mar 28 '17 at 10:44
If it's a CORS related issue, is there a way to allow it explicitly? Have to check — PeterFromCologne, Mar 28 '17 at 11:28

score 2 · Accepted Answer · answered Mar 28 '17 at 11:38

It is indeed a CORS issue. Thank you n00dl3 for you comment!

If the server, in this case a C# WebAPI allows explicitly to expose the custom headers, then Angular2 allows me to access them.

This website helped me: http://datawalke.com/c/webapi-owin-cors-and-custom-headers/

Solution

For testing I was able to allow all origins and list the custom headers I need.

    var att = new EnableCorsAttribute("*", "*", "*");
    att.ExposedHeaders.Add("Database-Deleted");
    att.ExposedHeaders.Add("Database-AlreadyDeleted");
    att.ExposedHeaders.Add("Database-DryRun");
    att.ExposedHeaders.Add("Database-Inserted");
    att.ExposedHeaders.Add("Database-Updated");
    config.EnableCors(att);

score 0 · Answer 2 · answered Nov 18 '17 at 06:15

In case your back-end is ASP.net WebAPI Core, you have to do the following way

  public void ConfigureServices(IServiceCollection services)
    {

        services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
        {
            builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader().WithExposedHeaders("X-Pagination");
        }));

Angular2: how to get custom response headers (CORS issue)

2 Answers2

Linked