将标头添加到角度 $resource 请求答案

【问题标题】：Adding header to angular $resource requests将标头添加到角度 $resource 请求
【发布时间】：2015-07-25 06:29:35
【问题描述】：

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

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

我已经搜索了一段时间，有几个问题与此有关，表明 CORS 是问题（不是，我在服务器端设置了正确的标头，并且还尝试在关闭网络安全的情况下运行chrome 只是为了仔细检查这是否没有干扰）。其他答案建议使用拦截器，但在我看来，对于这样一个简单的任务来说，这似乎是过度设计的（尽管如果这是我想我必须使用它的唯一方法）。

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

【问题讨论】：

您是否使用 base64 编码器对您的用户名和密码进行编码？
我遇到了类似的问题，我没有使用 base64 编码器，但现在它可以工作了。我认为，CORS 是你的问题。
@BoutayaBilal 查看我在原帖中添加的额外信息
见CORS Negotiation
好的，我不知道该链接中发生了什么（不使用 Spring，并且对此知之甚少）。作为参考，我关闭了我的 CORS 处理，并收到了预期的“请求的资源上不存在 'Access-Control-Allow-Origin' 标头”错误。我重新打开它，该错误消失了，但我仍然收到 403 错误，并且传出请求上没有应有的标头。

标签： angularjs angularjs-http

【解决方案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');
   }]);

【讨论】：

我想我最终可能需要这样做。但是那个例子比我见过的其他例子要简单得多，谢谢:)

【解决方案2】：

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

【讨论】：