在AngularJS中添加HTTP标头不起作用

Question

I am new to AngularJS and I was trying to add http header to all requests but it is not working. I was actually try to add those via the .config in Angular

My code is:

 angular.module('sc.app',[])
    .provider('TokenHandler',['$q',function ($q) {
        return {
            $get: function () {
                return {
                    request: function (config) {
                        var defer = $q.defer();
                        console.log('jwt');
                        config.defaults.headers.common['Authorization'] = 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==';
                        config.defaults.headers.common['Accept'] = 'application/json;odata=verbose';

                        return defer.resolve(config);
                    },
                    requestError: function (err) {
                        var defer = $q.defer();
                        return defer.reject(err);
                    },
                    response: function (success) {                            
                   var defer = $q.defer();
                    console.log(success)
                    return defer.resolve(success);
                },
                responseError: function (err) {
                    var defer = $q.defer();
                    return defer.reject(err);
                }
            };
        }
    }
}])

.config(['$httpProvider','TokenHandler',function ($httpProvider,TokenHandler) {
    $httpProvider.interceptors.push('TokenHandler');
}])

.service('TokenService',['$http','$localStorage',function ($scope,$localStorage) {
    $scope.getToken=function () {
        return $localStorage.gaid;
    }

    $scope.setToken=function (token) {
        $localStorage.gaid=token;
    }
}]);

I googled a lot but I could not solve the issue in it. Even though I also tried to add with config.headers option but also not working.

and my request header is

GET /api/datatable.json?_=1484584475255 HTTP/1.1
Host: scrm.app
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
Referer: http://scrm.app/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,ta;q=0.6
Cookie: _ga=GA1.2.550730185.1483706923; 
XSRF-TOKEN=eyJpdiI6Ik9RaDBLeWluTVBIS0ZnOWkyaWxDUXc9PSIsInZhbHVlIjoiWlMzZUxONGthTmRKbkxxQjkxMGZWTE40d1lFYnAxRkRCM254b21abUpiOVFkd3VqbXowTjhlenFYa0xSazV1WmJuK2wweUFNZjVvM05NTXU3NjAwVmc9PSIsIm1hYyI6Ijg1Yzk0OWM3MTFkNTdlYTA1NjgzYjYyMmY3NmE1MWI0OTA4Mjc1MjM1ZTdkYTUxOWUxZmZhYjFlNzRmNzc2MDkifQ%3D%3D; laravel_session=eyJpdiI6InZqb01UbDRNVFgrTG1FVitvZW1WQXc9PSIsInZhbHVlIjoic3NKUXo5ZGd5ODBpZXhNRXBsa1pmbVhFSmhUVDA3RkZyQ3FcL1VlOVRZUWt4UlVxZVlidlU4VUV5VjBCZFwvUldCbzZVNU83R25zMXpRZ25DTENTZGpsUT09IiwibWFjIjoiZjNjNWM2OWU2ZDM3NDVlNDRkYTRhMjk4MmM4NWJmNjI0ODQyMmQwMjkzZTBkZWQ3N2ZjZTg4YzdjYTljZWNjNCJ9

my response header

 HTTP/1.0 404 Not Found
Host: scrm.app
Connection: close
X-Powered-By: PHP/5.6.27
Cache-Control: no-cache, private
Date: Mon, 16 Jan 2017 16:49:42 GMT
Content-type: text/html; charset=UTF-8

Answer 1

When adding headers via config you only need config.headers eg -

config.headers['Authorization'] = 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==';
config.headers['Accept'] = 'application/json;odata=verbose';

Only when adding through the $http service do you need the rest eg -

 $http.defaults.headers.common.Authorization = 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==';

---

Edit: Another way to try add the following to the .service block -

.service('TokenService',['$http','$localStorage',function ($scope,$localStorage) {  
     var service = this;

    service.request = function(config) {
        config.headers['Authorization'] = 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==';
        config.headers['Accept'] = 'application/json;odata=verbose';

        return config;
    };
......