Response header is present in browser but not parsed by Angular $http response.headers()

Question

In our Angular app, we need to parse response headers of some $http.

In particular we need to parse some X-prefixed response headers, for example X-Total-Results: 35 .

Opening the Network tab of the browser dev tools and inspecting the resource relative to the $http request, I verified that the response header X-Total-Results: 35 is present.

in the browser, the X-Total-Results header is available, but cannot be parsed in the Angular $http.

Is there a way to access in $http the 'raw' response and write our custom parser for the header?

$http.({method: 'GET', url: apiUrl,)
    .then( function(response){
        console.log('headers: ', response.headers());
        console.log('results header: ', response.headers('X-Total-Results'));
        // ...
    })

console output

headers: Object {cache-control: "no-cache="set-cookie"", content-type: "application/json;charset=utf-8"}

results header: null

Answer 1

The reason you can't read the header on JavaScript but you can view it on the developer console is because for CORS requests, you need to allow the client to read the header.

Your server needs to send this header:

Access-Control-Expose-Headers:X-Total-Results

To answer your question in the comments, The Access-Control-Allow-Headers does not allow wildcards according to the W3 Spec

Answer 2

Use $httpProvider.interceptors you can intercept both the request as well as the response

for example

$httpProvider.interceptors.push(['$q', '$injector', function ($q, $injector) {
             return {
                 'responseError': function (response) {
                     console.log(response.config);
                 },
                 'response': function (response) {
                     console.log(response.config);
                 },
                 'request': function (response) {
                     console.log(response.config);
                 },
             };
         }]);

Update : You can retrive your headers info in call itself

$http.({method: 'GET', url: apiUrl)
    .then( (data, status, headers, config){
        console.log('headers: ', config.headers);
        console.log('results header: ', config.headers('X-Total-Results'));
        // ...
    })