Angularjs interceptor not working

Question

I am trying to create a $http interceptor that looks like this:

.config(['$httpProvider',function($httpProvider){
$httpProvider.interceptors.push(function($q,$window){
    return {
        'request':function(config){
            config.headers = config.headers || {};
            if($window.sessionStorage)
                config.headers.Authorization = 'Bearer '+$window.sessionStorage.token;
        },
        'requestError':function(rejection)
        {
            $q.reject(rejection);
        },
        'response':function(response){
            return response || $q.when(response);
        },
        'responseError':function(response)
        {
            if(response!=null && response.status == 401)
            {
                delete $window.sessionStorage.token;
                //make the user login again
            }
            return response || $q.when(response);   
        }       
    };
});
}])

The interceptor fails with the error:

 TypeError: Cannot read property 'headers' of undefined
at serverRequest (angular.js:9366)
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$eval (angular.js:14466)
at Scope.$digest (angular.js:14282)
at Scope.$apply (angular.js:14571)
at bootstrapApply (angular.js:1455)
at Object.invoke (angular.js:4203)
at doBootstrap (angular.js:1453)
at bootstrap (angular.js:1473)

Answer 1

You forgot to return the config value...

request: function(config) {
    if ($window.sessionStorage) {
        config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
    }
    return config;
}

From the documentation

request: interceptors get called with a http config object. The function is free to modify the config object or create a new one.
The function needs to return the config object directly, or a promise containing the config or a new config object.