How to read response headers in angularjs?

Question

My server returns this kind of header: Content-Range:0-10/0:

I tried to read this header in angular with no luck:

var promise = $http.get(url, {
    params: query
}).then(function(response) {
  console.log(response.headers());
  return response.data;
});

which just prints

Object {content-type: "application/json; charset=utf-8"}

Any ideas how to access the content range header?

Latter

Answer 1

Use the headers variable in success and error callbacks

From documentation.

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  })
  .error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

If you are on the same domain, you should be able to retrieve the response headers back. If cross-domain, you will need to add Access-Control-Expose-Headers header on the server.

Access-Control-Expose-Headers: content-type, cache, ...

Spiers

This still does not give me the response headers, just the request headers. – Latter

I have cross-domain enabled already. The screenshot in my question shows that the content-range header is inside the response in the chrome inspector. So the server is not the problem. – Latter

Yes, CORS returns certain headers by default. And you need to tell it which other headers are safe to be exposed via the api. See this. – Spiers

The success call seems to be deprecated and shouldn't be used. Check docs: docs.angularjs.org/api/ng/service/$http – Apple

THIS DOES NOT WORK ANYMORE! see: #41169885 – Mackle

will it work to fetch set-cookie(with httponly flag) from response header? – Ankylostomiasis

Answer 2

Why not simply try this:

var promise = $http.get(url, {
    params: query
}).then(function(response) {
  console.log('Content-Range: ' + response.headers('Content-Range'));
  return response.data;
});

Especially if you want to return the promise so it could be a part of a promises chain.

Finial

Giving a (+1) because response has a headers() method which takes a name parameter. This is my issue though; I cannot retrieve Authorization header [or any others] via response.headers('Authorization') even when I can see response.config.headers['Authorization'] in plain sight!!! What is the world is this function for then??? – Mono

Is it a cross-domain request? – Finial

You should probably not work with the A‌​uthorization in a single request like this. Use an interceptor for Authorization stuff – Sustentation

@EugeneRetunsky : I have cross domain request. I can see the authorization header in response, but now able to fetch it. Anyway I can do that as API is returning token for successful authentication. – Matchbook

i'm getting "headers is not a function" – Pathogen

Authorization is a common request header. I have never seen it as a response header. Are you sure it's actually in your response? The response.config.headers may be referring to the request, not the response. – Evita

Answer 3

Updated based on Muhammad's answer...

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
    console.log(headers()['Content-Range']);
  })
  .error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Nahama

Answer 4

Additionally to Eugene Retunsky's answer, quoting from $http documentation regarding the response:

The response object has these properties:

• data – {string|Object} – The response body transformed with the transform functions.

• status – {number} – HTTP status code of the response.

• headers – {function([headerName])} – Header getter function.

• config – {Object} – The configuration object that was used to generate the request.

• statusText – {string} – HTTP status text of the response.

Please note that the argument callback order for $resource (v1.6) is not the same as above:

Success callback is called with (value (Object|Array), responseHeaders (Function), status (number), statusText (string)) arguments, where the value is the populated resource instance or collection object. The error callback is called with (httpResponse) argument.

Pollack

Answer 5

response.headers();

will give you all the headers (defaulat & customs). worked for me !!

Note . I tested on the same domain only. We may need to add Access-Control-Expose-Headers header on the server for cross domain.

Blackbeard

Answer 6

The response headers in case of cors remain hidden. You need to add in response headers to direct the Angular to expose headers to javascript.

// From server response headers :
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, 
Content-Type, Accept, Authorization, X-Custom-header");
header("Access-Control-Expose-Headers: X-Custom-header");
header("X-Custom-header: $some data");

var data = res.headers.get('X-Custom-header');

Source : https://github.com/angular/angular/issues/5237

Punner

Answer 7

According the MDN custom headers are not exposed by default. The server admin need to expose them using "Access-Control-Expose-Headers" in the same fashion they deal with "access-control-allow-origin"

See this MDN link for confirmation [https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers]

Skied