Access HTTP Response Headers – AngularJS

Access HTTP Response Headers

Access HTTP Response Headers – AngularJS

Learn to Access HTTP Response Headers In Your AngularJS $http Request

Having been playing around with Angular for over 2 years, I found myself recently – for the first time – needing to access HTTP response headers in the success callback of my Angular $http request.

Looking around I found very little documentation on this so I thought I would write a short article.

First let’s look at a typical $http request:

1
2
3
4
5
6
7
$http.get('http://example.com/api/users/')
    .success(function(data, status, headers, config){

    })
    .error(function(data, status, headers, config){
   
    });

This is a GET request to the URL http://exmample.com/api/users/. Your success callback will execute when a 2xx-3xx status code is returned and your error callback when a 4xx-5xx status code is returned.

Usually we are focusing on the data parameter of our success callback when writing our code but today lets talk about the headers parameter.

Headers Parameter

The first thing I found was that the headers parameter was a function, some simple console logging helped me figure this out but unfortunately all this did for me was make me more confused…

I experimented first with invoking it and found that I got an object returned:

{content-type : text/html}

This made a little more sense but as only one header was listed it was not the solutions I was looking for.

I found that passing in my header as a string into the headers() function returned its value but I was still only getting access to the content-type header.

Server Config

After some digging I found this bit of code to through in my Apache Config:

Access-Control-Expose-Headers: X-Foo, ..

And voila! Now I could access my header either by returing the entire object – headers()

1
2
3
4
{
    content-type : text/html,
    x-foo : "my stuff here"
}

Or by accessing it individually – headers(‘x-foo’)

I hope this was helpful to you and saves you the time it took me to figure this trivial problem out.

Pro Tip: Reference MDN

Personally I love to look for the MDN (Mozilla Developers Network) link on my Google results. They have great and accurate documentation. Here is an article on HTTP headers:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

4 Comments
  • Philip Snyder
    Posted at 23:43h, 27 November Reply

    Thank you! I was having a hell of a time figuring out why my response headers weren’t available and worked like a charm!

  • Xiancai
    Posted at 02:31h, 27 January Reply

    Hi Jacob, thanks for the great work, I struggled with the headers this whole morning, and your article certainly helps.

  • Shrish
    Posted at 16:08h, 26 May Reply

    Thank you so much. I have been searching for this and found it here. Works like a charm

  • venkat
    Posted at 09:01h, 01 August Reply

    Thank you so much. I have been searching for this and found it here. Works like a charm

Post A Comment