Angular 2: Get Authorization header

Question

in my App (Angular 2 / Ionic 2) I implemented my own login/authentication. Basically it works like this: On login, username and password is being validated by the PHP backend. A token is generated, which is sent back to then frontend in the header (Authorization). The response from backend looks like this:

HTTP/1.1 200 OK
Host: localhost:8080
Connection: close
X-Powered-By: PHP/5.6.28
Set-Cookie: PHPSESSID=jagagi2le1b8i7r90esr4vmeo6; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Type: application/json
 Authorization: d7b24a1643a61706975213306446aa4e4157d167eaad9aac989067a329c492d3
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Origin, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Content-Length: 301

There's clearly an Authorization header with a token present. CORS seems also to be setup correctly, since I see Authorization in the Allow-Headers header.

But, when I try to get the header in Angular 2, it always returns null:

private extractDataAndSetAuthHeader(res: Response) {

    // Set auth header if available.
    // If not available - user is not logged in. Then 
    // we also have to remove the token from localStorage
    if(res.headers.has("Authorization"))
    {
        let token = res.headers.get("Authorization");

        this.setToken(token);
    }
    else
    {
        // If no token is sent, remove it
        this.removeToken();
    }

    let body = res.json();
    return body.data || { };
}

The first line of the method gives back false. Also, when I check the headers object in my response, it shows me only the following (Chrome dev tools):

[[Entries]]:
Array[4]
0:{"pragma" => Array[1]}
1:{"content-type" => Array[1]}
2:{"cache-control" => Array[1]}
3:{"expires" => Array[1]}

There's no Authorization header present in that object.

Can anyone please help me out?

Thanks in advance :)

Answer 1

Just wanted to post the answer as it might help others: The solution as to set

Access-Control-Expose-Headers: Authorization

Then - frontend can read the Authorization header as well.

Answer 2

That's not related to Angular. The problem is CORS limits headers by default and you do not see "Authorization" header when call CORS requests. So, adjust server to let it send Authorization header

Access-Control-Allow-Headers must be provided in response of OPTIONS request (pre-flight).

Access-Control-Expose-Headers must be provided in response of POST/GET request.

Access-Control-Expose-Headers: Authorization

Answer 3

This answer helped me : link

It shows how to add it in the backend and how use it in the frontend

Java backend:

public void methodJava(HttpServletResponse response){
...
response.addHeader("access-control-expose-headers", "Authorization");
}

And access the header on angular like this:

return this.http
    .get(<your url here for your backend>)
    .map(res => console.log("cookie: " + res.headers.get("Authorization") )
}