Why is the headers object empty when Angular handles a HTTP error

Question

My API (.Net Core) returns a correlation id header with each response. This is handled at the start and end of the pipeline to uniquely identify each interaction with the API. This will happen if my application throws an exception resulting in a HTTP 500 error.

Sample from .Net Core API logs

The GUID in the output is the correlation id, and you can see the final response code of 500 at the end of the formatted message.

Angular Typescript Code

The code in my Angular application is pretty simple...

    return this.http.post(
        uri,
        body)
        .map(response => {
            // TODO: Handle responses
        })
        .catch((error:any) => {
            // TODO: Handle errors                                
        });

However, in the event the server returns a 500 error, investigation of the error object yields a headers object which is empty giving me no access to any headers returned from the server.

I can see in the Chrome developer tools that the header is present on the response.

Is there a way I can get access to these headers in the event of an error condition?

This sounds like a CORS issue. See this post: https://stackoverflow.com/questions/43067069/angular2-how-to-get-custom-response-headers-cors-issue. — Kirk Larkin, Aug 27 '17 at 17:59
are you sure that the service appends the headers with the response objecT? — Aravind, Aug 27 '17 at 18:07

score 1 · Accepted Answer · answered Aug 27 '17 at 18:14

This was a CORS issue. I needed to add the following to my API configuration:

    app.UseCors(builder => builder
        .WithOrigins(
            "...",
            "...")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .WithExposedHeaders("CorrelationId")
        .AllowCredentials());

Note the addition of .WithExposedHeaders("CorrelationId"). Following the addition of this Angular could see the header.

Thanks to Kirk Larkin and this post: https://github.com/angular/angular/issues/5237

Why is the headers object empty when Angular handles a HTTP error

1 Answers1