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']

Answer 2

所以这是一个CORS问题。设置

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

服务器响应中的

解决了您的问题。

您需要解析对数字的响应：

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

获取自己的头文件$ Resource AngularJs

2 个答案: