Angular JS - 为所有 GET/POST 请求添加自定义标头答案

【问题标题】：Angular JS - add a custom header to all GET/POST requestsAngular JS - 为所有 GET/POST 请求添加自定义标头
【发布时间】：2015-07-01 04:43:28
【问题描述】：

我正在尝试使用拦截器向我的所有 GET/POST 请求添加“授权”标头。这是拦截器：

myApp.factory('httpRequestInterceptor', ['$rootScope', function ($rootScope) {
  return {
    request: function ($config) {
        $config.headers['Authorization'] = 'Basic ' + $rootScope.apiKey;
        return $config;
    }
  };
}]);

拦截器在myApp.config部分的主模块中使用如下：

$httpProvider.interceptors.push('httpRequestInterceptor');

由于某种原因，我在网络选项卡中看不到授权标头（我使用的是 Chrome），它没有到达服务器，我也没有收到任何错误。我的应用程序中的 GET/POST 请求发送到不在我的域中的远程服务器。

知道我在这里做错了什么吗？

解决方案： 我发现了问题，它在服务器端 - 显然，如果我在对 * 的响应中设置 Access-Control-Allow-Headers 它不起作用但是如果我按字面指定标题它就可以了。

【问题讨论】：

标签： angularjs http-headers authorization request-headers angular-http-interceptors

【解决方案1】：

问题出在服务器端 - 显然在对 * 的响应中设置 Access-Control-Allow-Headers 不起作用，但按照我需要的字面意思指定标题（Access-Control-Allow-Headers：授权）工作得很好。

【讨论】：

【解决方案2】：

你可以使用：

myApp.run([
  '$http', '$rootScope',
  function($http, $rootScope) {
    $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.apiKey;
  }
]);

【讨论】：

奇怪我在我当前的应用程序中使用了类似的东西并且它工作。这是一个有效的 jsfiddle：jsfiddle.net/epnxmkwy 我可以在发送标头的 chrome 工具中看到：Access-Control-Request-Headers:accept, authorization
什么时候设置$rootScope.apiKey？
我找到了解决方案，请参阅编辑后的问题。感谢您的帮助。
很高兴您发现了问题

【解决方案3】：

我觉得你应该改成

 myApp.factory('httpRequestInterceptor', ['$rootScope', function ($rootScope) {
    var injector = {
        request: function (config) {
               config.headers['Authorization'] = 'Basic ' + $rootScope.apiKey;
               return config;
        }
    };
   return injector;
    } ]);

试试这样website

【讨论】：

@user1531186 你试过我编辑的解决方案了吗？
我找到了解决方案，请参阅编辑后的问题。感谢您的帮助。

【解决方案4】：

您总是可以使用 $httpProvider 告诉 Angular 添加标题，如下所示：

myApp.config(['$httpProvider','$rootScope', function ($httpProvider, $rootScope) {
    $httpProvider.defaults.headers.common['Authorization'] = 'Basic' + $rootScope.apiKey;
}]);

这会将标头添加到所有请求。对于获取和发布，您可以设置： $httpProvider.defaults.headers.get['Authorization'] = ''; 和 $httpProvider.defaults.headers.post['Authorization'] = ''; 如果您不希望将标头添加到所有请求中，而不是 $httpProvider.defaults.headers.common['Authorization']。

【讨论】：

也试过了，还是不行。还确保我在响应中有 Access-Control-Allow-Headers 标头并将其设置为 *.
@user1531186 你能尝试创建一个小提琴来重现这个问题吗？
我找到了解决方案，请参阅编辑后的问题。感谢您的帮助。