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.



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) {

Since factories/services are singletons, this works as long as you do not need to dynamically change your 'authentication' value after the service has been instantiated.

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

It seems headers() normalizes the key names.


Adding to above responses of @Guria and @Panga

config.headers['X-Access-Token'] = $window.sessionStorage.token;

One can use x-access-token in header as JWT(jsonwebtoken). I store JWT in the session storage when a user authenticate first time.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.