Adding a custom header to a request for ngresource

ionic-v1
1

Hello,

I’m still a newbie with ionic and am loving how quickly you can get things up and running however I’m stuck and am hoping someone might be kind enough to help me out with something that’s been driving me bonkers. I’m trying to add a custom header to a request to a backend API using ngresource.

I’ve added the following code to my app.js file

    .config(function($stateProvider, $httpProvider, $urlRouterProvider, $ionicConfigProvider) {
    
      //code to embed a header in every request
     $httpProvider.defaults.headers.common['fantastic-new-header'] = 'header-value';
...

I am then using ionic serve to run on my laptop (have set my backend API to accepte CORS requests) and am seeing the following when I look at the Request Headers using Developer Tools in Chrome.

Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, fantastic-new-header
Access-Control-Request-Method:GET

So you can see the name of the header is being added but the value doesn’t seem to be. I’ve looked all around the web and on Stack Overflow and tried various options but am now completely stumped so am hoping someone might be able to give me a hand.

With many thanks,

John

2

I prefer to use an interceptor for this task.
in app.js

$httpProvider.interceptors.push('authInterceptor');

and then define it:

.factory('authInterceptor', function ($rootScope, $q, $location, localStorageService) {
    return {
        // Add authorization token to headers
        request: function (config) {
            config.headers = config.headers || {};
            var token = localStorageService.get('token');
            
            if (token && token.expires && token.expires > new Date().getTime()) {
              config.headers['x-auth-token'] = token.token;
            }
            
            return config;
        }
    };
})
1 Like
3

Hi Gmarziou,

Thanks for getting back to me. My apologies where specifically should I put the code.

I’ve tried

$httpProvider.interceptors.push('authInterceptor');

in the .config block of my app.js

and I put

.factory('authInterceptor', function ($rootScope, $q, $location, localStorageService) {
    return {
        // Add authorization token to headers
        request: function (config) {
            config.headers = config.headers || {};
            var token = localStorageService.get('token');
            
            if (token && token.expires && token.expires > new Date().getTime()) {
              config.headers['x-auth-token'] = token.token;
            }
            
            return config;
        }
    };
})

in my services.js file in an angular module which runs on load.

Is that correct? or should I have them both in app.js?

Thanks again for replying so quickly,

John

4

Yes it should work.
Though this is the app structure promoted by Ionic starter apps, this is far from being adequate for non trivial projects, you may want to have a look at Generator-M-Ionic