Setting application wide HTTP headers in AngularJS

Question

Setting application wide HTTP headers in AngularJS

Is there a way to set the $httpProvider headers outside of angular.module('myApp', []).config()?

I'm getting an Auth-Token from the server after I login the user, and I need to add it as a HTTP Header to all following requests.

javascript
mvvm
angularjs

Answer 1

You can use default headers for angular 1.0.x:

$http.defaults.headers.common['Authentication'] = 'authentication';

or request interceptor for angular 1.1.x+:

myapp.factory('httpRequestInterceptor', function () {
  return {
    request: function (config) {

      // use this to destroying other existing headers
      config.headers = {'Authentication':'authentication'}

      // use this to prevent destroying other existing headers
      // config.headers['Authorization'] = 'authentication;

      return config;
    }
  };
});

myapp.config(function ($httpProvider) {
  $httpProvider.interceptors.push('httpRequestInterceptor');
});

Answer 2

$http.defaults.headers.common['Auth-Token'] = 'token';

It seems headers() normalizes the key names.

Answer 3

I am geting CORS issuse in firefox and the same is working IE , I also added

"Access-Control-Allow-Origin"

in my request like

var config = {
  headers: {
    'Accept': 'application/json;odata=verbose',
    'Access-Control-Allow-Origin' : '*'
  }
}

even in the Rest resp also added the same but no luck, any one can you please advise?

Note : I am consuming the rest service whihc was on 8080 through angulajs ui which was on 8083.