I am using Angular 2.2.3 and doing http requests with observables with rxjs. The headers appear in the Chrome console, but the list of headers on the headers object from the response is empty. Here is the code :

Login function

login(body: Object): Observable<Response> {
    return this.http.post(this.url, body);
}

Call of login function with subscription to the observable

this.authService.login(values).subscribe(res => {
    console.log(res.headers.get("Authorization"))
    console.log(res)
},
err => {
    console.log(err);
});

Is there something I am doing wrong or that I should do differently?

Chrome network console response headers

Console.log results

The null value is res.headers.get("Authorization") As you can see, the headers list is empty.

Thank you very much for your help!

I am using Angular 2.2.3 and doing http requests with observables with rxjs. The headers appear in the Chrome console, but the list of headers on the headers object from the response is empty. Here is the code :

Login function

login(body: Object): Observable<Response> {
    return this.http.post(this.url, body);
}

Call of login function with subscription to the observable

this.authService.login(values).subscribe(res => {
    console.log(res.headers.get("Authorization"))
    console.log(res)
},
err => {
    console.log(err);
});

Is there something I am doing wrong or that I should do differently?

Chrome network console response headers

Console.log results

The null value is res.headers.get("Authorization") As you can see, the headers list is empty.

Thank you very much for your help!

• javascript
• http
• angular

• This has nothing to do with angular. If the data isn't into the json response you're getting from the server then, well, it's not there. – Joshua Ohana Commented Jan 13, 2017 at 3:23
• @JoshuaOhana But as I mentionned I said that the headers appear in the Chrome network console, so the headers are surely part of the response. I'm also using Postman and I receive and can parse my headers received from my API. Same thing with my Mocha tests. – user3530191 Commented Jan 13, 2017 at 4:03
• Oh hah my bad sorry, for some reason my brain blanked out on that thought the image was missing it. Not sure then good luck – Joshua Ohana Commented Jan 13, 2017 at 15:45
• No problem :-) But tough luck on the problem though. I'll be going through the Angular internals to see where the headers are parsed. – user3530191 Commented Jan 13, 2017 at 17:29
• For sure post back the answer when you get it, I'm awfully curious now too – Joshua Ohana Commented Jan 13, 2017 at 17:35

1 Answer 1

I have found the solution to my problem. It turns out that Angular uses an XMLHttpRequest behind the scenes. Because of that, the headers that can be shown to the client "programmatically" (with Angular's function) have to be in the list of the header Access-Control-Expose-Headers. This list has to be created in the backend when we send the request back to the client. Here is what I did with ExpressJS to enable the Authorization header:

app.use((req, res, next) => {
  // List of headers that are to be exposed to the XHR front-end object
  res.header('Access-Control-Expose-Headers', 'Authorization');
  next();
});

My initial code in the front-end stayed the same and the console.log of the Authorization header now appears.

Documentation explaining why we need this header

This whole documentation is very interesting, I thought I was pretty good in APIs, but I learned a lot while reading this :-)