如何在 Angular 中使用 $resource 访问响应标头？答案

【问题标题】：How to access response headers using $resource in Angular?如何在 Angular 中使用 $resource 访问响应标头？
【发布时间】：2017-01-19 03:59:09
【问题描述】：

我基本上像这样调用get 请求：

var resource = $resource('/api/v1/categories/:id')

resource.get({id: 1}).$promise.then(function(data){
  console.log(data)
})

这很好用.. 但是我如何获取响应标头？

【问题讨论】：

标签： angularjs http angular-resource

【解决方案1】：

您可以使用 transformResponse 操作 defined here 这将允许您添加标题

$resource('/', {}, {
    get: {
        method: 'GET',
        transformResponse: function(data, headers){
            response = {}
            response.data = data;
            response.headers = headers();
            return response;
        }
    }

在此处查看工作示例JSFiddle

【讨论】：

不适用于较新的版本。转换响应的函数现在应该返回反序列化的数据
只需访问作为数据之后的第二个参数传递的headersGetter 函数。请参阅下面或此处的答案：docs.angularjs.org/api/ngResource/service/$resource
像这样访问特定的标头：headers('Server')

【解决方案2】：

@Martin 的答案适用于相同的域请求。因此，我想在他的回答中补充一点，如果您使用跨域请求，则必须添加另一个带有 Access-Control-Expose-Headers: X-Blah, X-Bla 的标头以及 Access-Control-Allow-Origin:* 标头。

其中X-Blah 和X-Bla 是自定义标头。

您也不需要使用转换请求来获取标头。您可以使用以下代码：

var resource = $resource('/api/v1/categories/:id')

resource.get({id: 1}, function(data, headersFun){
  console.log(data, headersFun());
})

见this小提琴。希望这会有所帮助！！！

【讨论】：

我认为这比当前接受的答案更方便（至少在 2016 年）。 Angular 会自动为您提供带有第二个参数的标题值（不要忘记使用括号，因为这是一个函数，而不是直接对象）。
跨域不太重要，而标题函数作为then 函数中的第二个参数更相关——因为你的跨域信息，我差点错过了！
您在此处和在小提琴中写的内容之间存在细微但非常重要的区别。小提琴正在使用带有成功和错误回调的get 调用，在这种情况下， headersFun 存在。但是正如你上面写的那样通过$promise.then处理响应没有这样的第二个参数-headersFun是未定义的。
@Danny 根据您的建议改进了答案。

【解决方案3】：

老问题，但我认为值得一提以供将来参考。角度文档中有“官方”解决方案：

值得注意的是get、query等的成功回调方法也会在来自服务器的响应中传递作为 $http header getter 函数，所以可以重写上面的示例并通过以下方式访问 http 标头：

var User = $resource('/user/:userId', {userId:'@id'});

var users = User.query({}, function(users, responseHeaders){
  // ...
  console.log(responseHeaders('x-app-pagination-current-page'));
});

（为了清晰起见，文档中的代码略有更新）

对于 CORS 请求，需要公开其他答案中提到的标头。

【讨论】：