响应标头存在于浏览器中，但未由 Angular $http response.headers() 解析答案

【问题标题】：Response header is present in browser but not parsed by Angular $http response.headers()响应标头存在于浏览器中，但未由 Angular $http response.headers() 解析
【发布时间】：2015-11-30 23:14:37
【问题描述】：

在我们的 Angular 应用程序中，我们需要解析一些 $http 的响应头。

特别是我们需要解析一些以 X 为前缀的响应头，例如X-Total-Results: 35。

打开浏览器开发工具的Network 选项卡并检查与$http 请求相关的资源，我验证了响应标头X-Total-Results: 35 存在。

在浏览器中，X-Total-Results 标头可用，但无法在 Angular $http 中解析。

有没有办法在 $http 中访问“原始”响应并为标头编写我们的自定义解析器？

$http.({method: 'GET', url: apiUrl,)
    .then( function(response){
        console.log('headers: ', response.headers());
        console.log('results header: ', response.headers('X-Total-Results'));
        // ...
    })

控制台输出

headers: Object {cache-control: "no-cache="set-cookie"", content-type: "application/json;charset=utf-8"}

results header: null

【问题讨论】：

这很奇怪，你有任何拦截器可能会修改返回的承诺吗？
不，我没有任何拦截器
@yvesmancera 我也觉得这很奇怪！如果标题在开发工具浏览器中可见，则意味着它应该可以以角度访问，对吗？或者 CORS 或类似问题可能仍然存在一些问题？该 api 是跨域访问的，我有 CORS 我将用其他标题更新问题。
既然您提到了 CORS，这绝对是您的问题：stackoverflow.com/questions/6112524/…
谢谢，我会试试的。现在我有Access-Control-Allow-Headers:X-Total-Results，当然还有Access-Control-Allow-Origin:*

标签： javascript angularjs http http-headers httpresponse

【解决方案1】：

使用 $httpProvider.interceptors 可以拦截请求和响应

例如

$httpProvider.interceptors.push(['$q', '$injector', function ($q, $injector) {
             return {
                 'responseError': function (response) {
                     console.log(response.config);
                 },
                 'response': function (response) {
                     console.log(response.config);
                 },
                 'request': function (response) {
                     console.log(response.config);
                 },
             };
         }]);

更新：您可以在调用本身中检索您的标头信息

$http.({method: 'GET', url: apiUrl)
    .then( (data, status, headers, config){
        console.log('headers: ', config.headers);
        console.log('results header: ', config.headers('X-Total-Results'));
        // ...
    })

【讨论】：

响应对象在 $http 回调中可用：$http().then(function(response){ // response object available here }) 问题是它不解析我感兴趣的结果标头 -- 请参阅问题。
您的更新代码有问题，您的意思是 .success(function(data, status, header, config) {}) 吗？

【解决方案2】：

之所以在 JavaScript 上无法读取标头，但可以在开发者控制台上查看，是因为对于 CORS 请求，您需要允许客户端读取标头。

您的服务器需要发送此标头：

Access-Control-Expose-Headers:X-Total-Results

为了回答您在 cmets 中的问题，Access-Control-Allow-Headers 不允许根据 W3 Spec 使用通配符

【讨论】：

这样就解决了问题。不过这很有趣，我认为开发人员控制台是一个客户端......只是猜测我希望类似于在同一个浏览器中运行的 angular/javascript 客户端......显然我错过了一些东西。
您还可以在开发者工具上查看 HTTPOnly cookie，而在 JavaScript 上无法读取它们。
拯救了我的一天，我有一个 Cors-Toggle chrome 插件，因此我只能看到几个标题。