Get own headers $Resource AngularJs

Question

I have a REST API in GO language and the front-end in Angularjs , but when I get my resource in angular my custom header don't exist.

Controller:

  Persons.query(
    function (data, headerGetter, status) {

      var headers = headerGetter();

      console.log(headers["X-Total-Count"]); //PRINT: undefined
      console.log(headers) //PRINT: {Content-Type:application/json;charset=utf-8}
      console.log(data); //PRINT: [{name:'mr x', age:'67'}, ....]

    },
    function (error) {
      console.error(error);
    });

Model:

myApp.factory("Persons", function ($resource) {
  return $resource(api_url+"/persons");
});

Response Chrome or Firefox, any client:

Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Content-Length:1839
Content-Type:application/json; charset=utf-8
Date:Thu, 12 Mar 2015 21:53:54 GMT
X-Total-Count:150

I have removed the Go tag because the header is clearly visible .. so Go has done its job. I have added the Angular tag for you .. because this is an Angular question. — Simon Whitehead
– Simon Whitehead, Commented Mar 12, 2015 at 22:37
What do you mean by "when I get my resource in angular, my custom header don't exist"? When do you test this? In which code? — Anthony O.
– Anthony O., Commented Mar 18, 2015 at 14:45
The custom headers are not even returned by the internal call to $http. — line-o
– line-o, Commented Mar 18, 2015 at 15:32
This seems to be a CORS issue see stackoverflow.com/questions/17038436/… — line-o
– line-o, Commented Mar 18, 2015 at 15:33

Cosmin · Accepted Answer · 2015-03-19 15:48:35Z

You're making a request from a different domain than the one where your API is located, operation which is called Cross-site HTTP requests ( CORS )

In order to use custom headers you need to set another one called Access-Control-Expose-Headers

If you want clients to be able to access other headers, you have to use the Access-Control-Expose-Headers header. The value of this header is a comma-delimited list of response headers you want to expose to the client.

This header lets a server whitelist headers that browsers are allowed to access. For example:

Access-Control-Expose-Headers: X-My-Custom-Header,X-Another-Custom-Header

This allows the X-My-Custom-Header and X-Another-Custom-Header headers to be exposed to the browser.

The way I do it in .NET ( I suppose it's kinda similar in Go):

HttpContext.Current.Response.AppendHeader("Access-Control-Expose-Headers", "X-Total-Pages, X-Records");
HttpContext.Current.Response.AppendHeader("X-Total-Pages", pages.ToString());
HttpContext.Current.Response.AppendHeader("X-Records", records.ToString());

And in AngularJS I'm getting headers like this :

var headers = headers();
headers['x-total-pages']

line-o · Accepted Answer · 2015-03-18 15:45:32Z

2

So this IS a CORS issue. Setting

Access-Control-Expose-Headers:"X-Total-Count"

in the server response solves your problem.

You will need to parse the response to a number:

parseInt(headers('X-Total-Count'), 10)

answered Mar 18, 2015 at 15:45

line-o

1,8953 gold badges16 silver badges34 bronze badges

Collectives™ on Stack Overflow

Get own headers $Resource AngularJs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related