Get response custom headers for cross-origin request

Question

I have an Angular2/4 application with a get request that has a response header with a key of 'X-Auth-Key'. When I call response.header I get the default headers and then I call response.headers.get('X-Auth-Token') I get null. Below is my code and a screenshot of the request from the Chrome Console (var url is defined elsewhere).

    getToken(id: string, password: string): Observable<User> {
    let headers = new Headers({ 'X-Auth-User': id, 'X-Auth-Key': password });
    return this.http
        .get(url + 'auth', { headers: headers })
        .map(response => {
            let user: User = response.json() as User;

            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify({ user: user, token: response.headers.get('X-Auth-Token') }));

            return user;
        })
   }// Get authorization token

I'm not sure what I am doing wrong, but I appreciate any help

Thanks!

sideshowbarker sideshowbarker · Accepted Answer · 2017-07-10T17:50:08

The server must be configured to send an Access-Control-Expose-Headers response header that includes "X-Auth-Key" in its value if you want your requesting frontend JavaScript code to be allowed to access the X-Auth-Key response header value.

If the response includes no value for the Access-Control-Expose-Headers header, the only response headers that browsers will let you access from client-side JavaScript in your web app are Cache-Control, Content-Language, Content-Type, Expires, Last-Modified and Pragma.

See https://fetch.spec.whatwg.org/#cors-safelisted-response-header-name for the spec on that.

Get response custom headers for cross-origin request

1 Answers