Accessing custom http response headers in angularjs

Question

Response from server

I am trying to access the header 'error-detail' as you can see in the browser network inspector (link above), the header gets returned. Server-wise I have also added the custom header to the 'Access-Control-Expose-Headers' to allow cross-domain requests as this was suggested to be the fix on other questions.

Below is the request to the server along with the success/error callbacks.

this.signon = function (request, onComplete, onError) {
    console.log("Calling server with 'login' request...");

    return $http.post("http://localhost:8080/markit-war/services/rest/UserService/login/", request)
        .then(onComplete, onError);
};

var onLookupComplete = function(response) {
    if (response.data.username)
    {
        //If user is returned, redirect to the dashboard.
        $location.path('/dashboard');
    }

    $scope.username = response.data.username;
};

var onError = function(response) {
    $scope.error = "Ooops, something went wrong..";
    console.log('error-detail: ' + response.headers('error-detail'));
};

When I try access the response header as seen below:

    console.log(response.headers());
    console.log('error-detail: ' + response.headers('error-detail'));

This only outputs: content-type: "application/json" error-detail: null

Is there a reason why the error-detail header is not being mapped over to the response object?

Probably not, but not sure what response.headers() actually returns. Have you taken a look at this stackoverflow.com/questions/220231/… — user2085143
– user2085143, Commented Nov 28, 2016 at 20:56
Can you post the angular code that you are using to make the request, as well as the callback function? — Larry Turtis
– Larry Turtis, Commented Nov 28, 2016 at 21:16
@LarryTurtis Have edited my question to include the request + callback as requested. Thanks — Ibrahim Farah
– Ibrahim Farah, Commented Nov 28, 2016 at 21:38

Andreas Jägle · Accepted Answer · 2016-11-28 23:00:59Z

12

I think you are on the right track. To have access to custom headers, your server needs to set this special Access-Control-Expose-Headers header, otherwise your browser will only allow access to 6 predefined header values as listed in the Mozilla docs.

In your screenshot such a header is not present in the response. You should have a look at the backend for this cors header to also be present in the response.

answered Nov 28, 2016 at 23:00

Andreas Jägle

12.3k3 gold badges33 silver badges33 bronze badges

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

Comments

georgeawg · Accepted Answer · 2016-11-28 23:09:34Z

9

This is a CORS Issue. Because this is a cross-origin request, the browser is hiding most ot the headers. The server needs to include a Access-Control-Expose-Headers header in its response.

The Access-Control-Expose-Headers¹ response header indicates which headers can be exposed as part of the response by listing their names.

By default, only the 6 simple response headers are exposed:

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

For more information, see MDN HTTP Header -- Access-Control-Expose-Headers

answered Nov 28, 2016 at 23:09

georgeawg

49k13 gold badges77 silver badges98 bronze badges

Collectives™ on Stack Overflow

Accessing custom http response headers in angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related