响应 header 出现在浏览器中但未被 Angular $http response.headers() 解析

Question

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

特别是我们需要解析一些 X-prefixed 响应 header，例如 X-Total-Results: 35.

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

在浏览器中，X-Total-Resultsheader可用，但在Angular$http.

中无法解析

有没有办法在 $http 中访问 'raw' 响应并为 header 编写自定义解析器？

$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

Answer 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);
                 },
             };
         }]);

更新：您可以在通话中检索您的 headers 信息

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

Answer 2

你无法在 JavaScript 上读取 header 但你可以在开发者控制台上查看它的原因是因为对于 CORS 请求，你需要允许客户端读取 header.

您的服务器需要发送这个 header:

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

在评论中回答你的问题，Access-Control-Allow-Headers根据W3 Spec

不允许通配符

响应 header 出现在浏览器中但未被 Angular $http response.headers() 解析

Response header is present in browser but not parsed by Angular $http response.headers()

javascript

angularjs

http

http-headers

httpresponse