Angular Js - set token on header default

Im trying to add a header with my access token to each API call. It works well for all the GET requests, but as soon as I try to make a POST the header isn't added.

Here is how I add the token:

app.factory('api', function ($http, $cookies) {
return {
    init: function (token) {
        $http.defaults.headers.common['Token'] = token || $cookies.loginTokenCookie;
    }
  };
});

Which gets called from here:

app.run(function ($cookies, $http, $location, $rootScope,api) {
    $rootScope.location = $location;
    api.init();
});

I have tried doing it like the following:

app.factory('api', function ($http, $cookies) {
return {
    init: function (token) {
        $http.defaults.headers.common['Token'] = token || $cookies.loginTokenCookie;
        $http.defaults.headers.post['Token'] = token || $cookies.loginTokenCookie;

    }
};
});

But this also doesnt work. It only works when I change the header key name like the following:

 $http.defaults.headers.post['Token-Post'] = token || $cookies.loginTokenCookie;

How do I assign a default header to posts and get requests in AngularJs?

Solution 1:

Instead of placing the token on the headers inside each service (or call), it might be better to use an $http interceptor (docs here).

Then, you can place the token on every request. This will work whether the request is a GET or POST.

JS sample:

$httpProvider.interceptors.push(function($q, $cookies) {
    return {
     'request': function(config) {

          config.headers['Token'] = $cookies.loginTokenCookie;
          return config;
      }
    };
  });

Solution 2:

Maybe I'm wrong but why not just:

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.post['token'] = 'your_token';
}]);

Interceptors are heavier and not needed in this case