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, when I try to get header value as described in Angular guide, I get a "null" value instead of the actual value. Here is my code (note: I'm setting responseType:'text' to avoid Json parsing error as the response body is empty):

(...)
import { HttpClient } from '@angular/common/http';

(...)

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) {
  }

  ionViewDidLoad() {
    let obj = {nome : "SomeName"}
    this.http.post("http://localhost:8080/categorias", obj, {observe: 'response', responseType: 'text'})
    .subscribe(
        (resp) => {
          console.log(resp.headers.get('Location'));
        }
      );
  }

I even tried console.log(resp.headers) in order to check this object, and it shows a completely different structure:

How can I get a custom header from a HttpResponse object from the new HttpClient Angular API?

Cant you set a break point and see what is contained in resp.headers? Or maybe do a console.log to see if the the headers are actually set — Jota.Toledo
– Jota.Toledo, Commented Dec 14, 2017 at 14:04
thought or setting interceptor, using which you can send response header of your wish? — Deepak Jha
– Deepak Jha, Commented Dec 14, 2017 at 14:09
@Jota.Toledo I tried that. I've edited the question with that information. — Nelio Alves
– Nelio Alves, Commented Dec 14, 2017 at 14:11

score 19 · Accepted Answer · 2018-08-24 06:56:03Z

19

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 !

edited Aug 24, 2018 at 6:56

answered Dec 14, 2017 at 14:15

user4676340

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

Comments

akulinski · Accepted Answer · 2017-12-15 01:14:01Z

5

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 :)

answered Dec 15, 2017 at 1:14

akulinski

592 bronze badges

1 Comment

chris31389 Over a year ago

The image in the question shows that the location is being supplied by the API

SHUBHASIS MAHATA · Accepted Answer · 2020-01-12 13:44:03Z

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

answered Jan 12, 2020 at 13:44

SHUBHASIS MAHATA

9487 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related