2

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

This is the response in the Chrome console where 'Authorization definitely exists'

Console.log results

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

Thank you very much for your help!

Improve this question
6
  • 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. 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. 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 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. Commented Jan 13, 2017 at 17:29
  • For sure post back the answer when you get it, I'm awfully curious now too Commented Jan 13, 2017 at 17:35

1 Answer 1

Reset to default
8

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

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

1 Comment

I encountered the same issue. That documentation says The Access-Control-Expose-Headers header lets a server whitelist headers that browsers are allowed to access. Why can Chrome network console can get those response headers? I'm wondering if it also use XMLHttpRequest?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.