Why can I not access $http error response headers with Angular?

Question

I am using $http to make a request:

$http.post('/some/url').success(function() {
    ....
}).error(function(data, status, headers) {
    console.log(headers('x-infosnap-tfa'));
});

The request intentionally returns a 401, resulting in the error callback above being called. This works great. And as you can see, upon inspection in Chrome, the following response headers are available:

Unfortunately headers('x-infosnap-tfa') returns null, and I am unable to access the response headers, but clearly the response headers are being sent.

Any ideas why I can't access the headers?

Answer 1

Turns out that even though I could see the response headers in Chrome, I strangely still had to explicitly expose those headers in my API. Here's what I did:

app.use(cors({
    exposedHeaders: ['x-infosnap-tfa']
}));

Credits to this post.