Question

我正在尝试为angular（用于访问REST服务器的$ resource）发送的所有http请求添加标头，以添加Basic Auth信息（来自用户输入的用户名/密码）。

当用户点击登录按钮时，我认为它就像$http.defaults.headers.common['Authorization'] = value;（其中值是正确格式化的身份验证信息）一样简单，但是当发送请求时，返回403 Unauthorized，并检查请求中的Chrome的网络标签页未在简单的资源查询中设置。

我一直在寻找一段时间，有几个问题提到这个建议CORS是问题（事实并非如此，我在服务器端设置了正确的标头，并尝试在网络安全中运行镀铬只是为了仔细检查这不是干扰）。其他答案建议使用一个拦截器，但在我看来这对于这么简单的任务来说是非常过度设计的（尽管如果这是我认为我必须使用它的唯一方法）。

编辑：附加信息：我确信CORS不是问题，因为对不需要身份验证的同一服务器的请求成功并返回预期的响应。这是授权标头未正确设置（或根本没有设置）的问题。

Answer 1

最佳做法是创建一个Http Request Interceptor并在那里添加Authorization标头。

angular.module("MyApp").factory("authHttpRequestInterceptor", ["authenticationDataService",
   function (authenticationDataService) {

       return {

           request: function (config) {
               // This is the authentication service that I use.
               // I store the bearer token in the local storage and retrieve it when needed.
               // You can use your own implementation for this
               var authData = authenticationDataService.getAuthData();

               if (authData && authData.accessToken) {
                   config.headers["Authorization"] = 'Bearer'+ authData.accessToken;
               }

               return config;
   }
};
}]);

之后，在主模块中注册拦截器：

angular.module("MyApp").config([
   "$httpProvider", function ($httpProvider) {
       $httpProvider.interceptors.push('authHttpRequestInterceptor');
   }]);

Answer 2

您可以使用$httpProvider.interceptors。如果您使用$resource，请尝试使用它的属性 transformRequest 。可以帮助您。

将标头添加到angular $ resource请求

2 个答案: