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

Question

I'm trying to use an interceptor to add an 'Authorization' header to all my GET/POST requests. Here is the interceptor:

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

The interceptor is being used in the main module as follows in the myApp.config part:

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

For some reason I can't see the Authorization header in the network tab(I'm using Chrome) and it's not getting to the server and I don't get any errors. The GET/POST request in my application are to a remote server that is NOT in my domain.

Any idea what am I doing wrong here?

Solution: I found the problem, it was on the server side - apparently if I set the Access-Control-Allow-Headers in the response to * it doesn't work but if I specify the headers literally it works just fine.

Answer 1

the problem was on the server side - apparently setting the Access-Control-Allow-Headers in the response to * didn't work but specifying the headers literally to what i needed(Access-Control-Allow-Headers: Authorization) works just fine.

Answer 2

You can use:

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

Answer 3

I think you should change it to

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

try like this website

Answer 4

You can always tell angular to add the header using the $httpProvider like this:

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

This will add the header to ALL requests. For get and post, you can set the : $httpProvider.defaults.headers.get['Authorization'] = ''; and $httpProvider.defaults.headers.post['Authorization'] = ''; instead of $httpProvider.defaults.headers.common['Authorization'] if you don't want the header to be added to all requests.