Angular JS - 添加自定义 header 到所有 GET/POST 请求

Question

我正在尝试使用拦截器将 'Authorization' header 添加到我所有的 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');

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

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

解法： 我发现了问题，它出在服务器端 - 显然，如果我在对 * 的响应中设置 Access-Control-Allow-Headers 它不起作用，但如果我从字面上指定 headers 它就可以正常工作。

Answer 1

我想你应该把它改成

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

这样试试website

Answer 2

您可以使用：

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

Answer 3

您总是可以告诉 angular 使用 $httpProvider 添加 header，如下所示：

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

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

Answer 4

问题出在服务器端 - 显然在对 * 的响应中设置 Access-Control-Allow-Headers 无效，但按字面意思指定 headers 我需要的内容（Access-Control-Allow-Headers：授权）工作正常。

Angular JS - 添加自定义 header 到所有 GET/POST 请求

Angular JS - add a custom header to all GET/POST requests

angularjs

http-headers

authorization

request-headers

angular-http-interceptors