Accessing custom http response headers in angularjs

Question

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?

Answer 1

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

Answer 2

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.