IE misses Headers - angular $http

Question

I`m trying to fetch results from remote server (inaturalist.org) using angularjs $http. The server use headers to specify Paging information (total entries, page, etc).

My problem is when using IE (Edge, IE11 tested) I cant see all the headers.

$http({
method  : 'GET',
url     : 'https://www.inaturalist.org/observations.json?page=1&per_page=30'})
.success(function (data, status, headers) {

   scope.headers = headers();
});

});

See https://jsbin.com/rohoda/edit?js,output

Any idea whats wrong ?

Answer 1

This is a bug in Internet Explorer's implementation of the XMLHttpRequest object. Since you are making a cross domain request CORS rules apply. It is a GET request so it is not necessary to make a pre-flight OPTIONS request. The server correctly returns the following response header:

Access-Control-Expose-Headers: X-Per-Page, X-Total-Entries

and yet you cannot access the X-Total-Entries response header using the getResponseHeader() method (which is what this header variable represents in the success callback).

The only browser that fully and correctly implements this Access-Control-Expose-Headers CORS header is Google Chrome.

You may find the following article useful and especially the Access-Control-Expose-Headers problem section right at the bottom:

All browsers (except Google Chrome) have buggy getRequestHeader() implementations, so the headers may not be accessible to clients even after you set the Access-Control-Expose-Headers header. In my example, ETag header accessible only in Google Chrome browser. Safari return only simple response headers, while Firefox doesn't return ANY response headers.

I am afraid that the only workaround here is to setup a proxy script on your domain that will act as a bridge between your domain and the remote domain. Then make the AJAX request to your own domain to avoid the need of using CORS.