CODEWITHSUNDEEP
angularjshttphttp-headerstoken
BT101
BT101

Reputation: 3836

Add an exception do defaults headers in angularJS

Hello I want to use external API to gather all the current currency rate. My front is based on token and I am storing token in localForage which is nothing but async localStorage. 

//this execute after every page refresh
$localForage.getItem('authorization')
   .then(function(authData) {
       if(authData) {
           $scope.authentication.isAuth = true;
           $http.defaults.headers.common.Authorization = 'Bearer ' + authData.token;
           //set authentication variable to true and add token to every request after page refresh
       }
   }, function(){
           console.log("error with getting authorization localForage after refresh");
       }
   );


//this execute after custom event emitted after success login response
$rootScope.$on('localForageUpdated', function(event){
    $localForage.getItem('authorization')
        .then(function(authData) {
            if(authData) {
                $http.defaults.headers.common.Authorization = 'Bearer ' + authData.token;
                $scope.authentication.isAuth = true;
                //set authentication variable to true and add token to every request after page refresh
            } else {
                $scope.authentication.isAuth = false;
            }
        }, function(){
                console.log("error with getting authorization localForage on event");
            }
        );
});

So this basically add header with token before every backend request.

Unfortunately when I try to download all the current currency rate from external API I get following error:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

That's due to fact I added header with my token. Can I somehow add an exception while seting $http.defaults.headers.common.Authorization = 'Bearer ' + authData.token;?

Upvotes: 0

Views: 119

Answers (1)

Mickael Dubois
Mickael Dubois

Reputation: 355

Here is my solution you can use it to inspire you.

I create au interceptor to add the authorization. In this interception you can put your exception logic base on your need in my case I base it on the url.

angular.module('yourAppName').factory('authInterceptor', function ($q, $window) {
    return {
        request: function (config) {
            config.headers = config.headers || {};

            if ($window.localStorage.token
                    && $window.localStorage.token !== undefined
                    && $window.localStorage.token !== 'undefined') {
                if(config.url.startsWith("xyz")){
                    delete config.headers.Authorization;
                } else {
                    config.headers.Authorization = 'Bearer ' + $window.localStorage.token;
                }
            }
            return config;
        },
        response: function (response) {
            return response || $q.when(response);
        },
        // optional method
        responseError: function (response) {
            return $q.reject(response);
        }
    };
});

angular.module('rmsApp').config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
});

Upvotes: 1

Related Questions