Can't read custom header in HttpResponse from HttpClient in a Ionic Angular application

Question

I\'m requesting an endpoint that creates a new resource and returns a 201 response containing a \"Location\" header with the newly created resource:

However

Answer 1

I encountered a similar issue with the eTag header : this is a Cross Origin issue.

From what I remember, CORS return only a couple of simple headers, such as Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, etc.

If you want to return a specific header, you have to add another header, Access-Control-Expose-Headers, containing a list of the headers you want to return with it. So, in your case, Access-Control-Expose-Headers = 'location'.

You also obvioulsy need to change your backend to return the same header to Angular.

Hope this helps !

Answer 2

        Response.Headers.Append("myCaptchaName", "value");


services.AddCors(options =>
        {
            options.AddPolicy("AllowMyOrigin",
                builder => builder.WithOrigins("http://localhost:4200").AllowAnyHeader().
                AllowAnyMethod().AllowCredentials()
                .WithExposedHeaders("myCaptchaName"));
        });
        services.Configure<MvcOptions>(options =>
        {
            options.Filters.Add(new CorsAuthorizationFilterFactory("AllowMyOrigin"));
        });

Answer 3

I had that problem too. In my case I saw only Content-Type, Pragma and Expiration headers.

In fact, that is not a Angular issue. The reason that there are not headers that you expect is a CORS.

Adding 'access-control-expose-headers' : 'Location' on the API solves your problem :)