获取自己的头文件$ Resource AngularJs

Question

我有一个GO语言的REST API和Angularjs中的前端,但是当我在angular中获取我的资源时,我的自定义头文件不存在.

控制器:

  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);
    });

模型:

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

响应Chrome或Firefox,任何客户:

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

Answer 1

您正在从与您所在的域不同的域发出请求,该API操作被调用Cross-site HTTP requests ( CORS )

要使用自定义标头,您需要设置另一个名为 Access-Control-Expose-Headers

如果希望客户端能够访问其他标头,则必须使用Access-Control-Expose-Headers标头.此标头的值是您要向客户端公开的响应标头的逗号分隔列表.

此标头允许服务器将允许浏览器访问的白名单标题列入白名单.例如:

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

这允许将X-My-Custom-Header和X-Another-Custom-Header标头公开给浏览器.

我这样做的方式.NET(我想它有点类似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());

在AngularJS我得到这样的标题:

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