Angular 拦截器中的响应标头

Posted 2023-03-08

【中文标题】Angular 拦截器中的响应标头

【英文标题】：Response headers in Angular interceptor

【发布时间】：2015-11-13 10:02:35

【问题描述】：

我有一个用于身份验证的拦截器。

当我收到 401 响应错误时，我想从响应中获取标头。

拦截器是：

function ($httpProvider, fileUploadProvider) 

    $httpProvider.interceptors.push(function($q, $localStorage) 
  return 
   'request': function(config) 
       if ($localStorage.token) 
           config.headers.Authorization = 'Bearer ' + $localStorage.token;
       

       return config;
    ,

    'responseError': function(response) 
       if (response.status === 401) 
          //$rootScope.$broadcast('unauthorized');  

          // WWW-Authenticate: Bearer error="invalid_token"

          var authResult = response.headers('WWW-Authenticate');
          if (authResult.indexOf("invalid_token")>-1) 
              $localStorage.token = null;
              $timeout(function()
                ;
              );
                   
       

       return response;
    
  ;

我想从响应中获取 WWW-Authenticate 标头。

我可以通过查看 Chrome 开发人员工具中的网络选项卡来确认标头是否在 Web 服务调用的响应中。如果我在响应处理程序函数中设置断点，然后在控制台中运行 console.log(response.headers()) 我得到：

Object 
undefined

如何获取响应标头？

【参考方案1】：

responseError 函数接收rejection 而不是response。 因此，如果您想访问响应标头，您需要如下所示。

'responseError': function(rejection) 
    if (rejection.status === 401) 
        console.log(rejection.config.headers);
    

我希望这会对你有所帮助。 :)

【讨论】：

感谢您的建议，但这给出了请求标头而不是响应标头

哦！我觉得很傻。我会继续寻找解决方案。

我遇到了完全相同的问题。我只能访问请求标头，而不是响应标头。你找到解决方案了吗？

【参考方案2】：

虽然我知道这不是答案，应该作为评论发布，但我在这里发布它是为了使用屏幕截图。

我尝试使用如下所示的测试环境获取响应标头。

nodejs 服务器

res.setHeader('WWW-Authenticate', 'invalid_token');
res.status(401).send();

angularjs

'responseError': function(rejection) 
    if (rejection.status === 401) 
        console.log(rejection.headers('WWW-Authenticate'));
    

Chrome 开发工具截屏

如您所见，我可以正确获取响应标头。 因此，我认为您设置响应标头的服务器代码中似乎存在一些问题。

您想向我们展示您的 chrome 开发工具屏幕截图和您设置响应标头的服务器代码吗？

【讨论】：

无法在评论中粘贴屏幕截图。当我查看网络选项卡 WWW-Authenticate:Bearer error="invalid_token" 时，我肯定会在响应中得到标题，这可能是 CORS 问题吗？

将屏幕截图粘贴到您的原始问题中将有助于我们了解您的情况。如果您的 chrome 正确接收到响应标头，我认为它不可能是 CORS。

感谢屏幕截图。我知道我的环境和你的环境之间的区别是请求方法。因此我更新了我的测试环境以使用 GET 方法而不是 POST 方法，不幸的是我的测试工作仍然很好。嗯...