Globally set custom HTTP header in AngularJS from ngInit

Question

I am unable to set custom HTTP header taken from ngInit in AngularJS.

I set variable using ngInit in html:

<div ng-init="myApiKey='valueOfVar'"></div>

Now I want to use this variable in all HTTP requests. I tried to set it in app.config and in controller too.

If I set it immediately, variable is undefined.
If I set it in $scope.$watch callback function, variable is defined, but HTTP requests are without that header.

I set header with:

$http.defaults.headers.common.Authorization = 'something';

(or via $httpProvider, when in app.config) and then use it in service utilizing $resource. My code looks like [this][1]

I tried to set it in config, in run, in controller and as a service, but nothing worked for me yet. Thank you in advance for any advice given.

Edit: Now I have interceptor:

myApp.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpRequestInterceptor');
});

myApp.factory('httpRequestInterceptor', ['$rootScope', function($rootScope) {
    return {
        request: function($config) {
            $config.headers['Authorization'] = 'Basic ' + $rootScope.apiKey;
            return $config;
        }
    };
}]);

But $rootscope.apiKey (which is set in main controller) is undefined at first call. After that, it's okay (and set).

@Fals How? If I want to use that variable in Angular, then it has to be set in its js files, or not? — PhoenixS
– PhoenixS, Commented Nov 20, 2013 at 17:50

Karim Oukara · Accepted Answer · 2014-04-03 12:29:17Z

4

the following code will allow you to intercept all http requestes of your application and to add a property 'language' in the header of the request

angular.module('app', ['ngRoute', 'ngResource']).run(function($http) {
  $http.defaults.headers.common.language='fr-FR';
});

we can add many properties in the http header

answered Apr 3, 2014 at 12:29

Karim Oukara

2,7269 gold badges43 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fals · Accepted Answer · 2013-11-20 17:52:11Z

3

If you wanna modify request/response in AngularJS you should do a deeply read about Interceptor:

Angular JS Web Site: $http

You can call $http(config), where config is a object with every configuration. There's a configuration there for headers, where you should put your code:

headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent.

If you google about Interceptor, you will get a full list of blogs explaining how to use It, and providing example codes, here's one that help me out sometime ago:

Understanding angular $http interceptors

answered Nov 20, 2013 at 17:52

Fals

6,8394 gold badges26 silver badges46 bronze badges

2 Comments

PhoenixS Over a year ago

Thank you. I'm almost there, but I can't get my $scope into interceptor, so I could take that variable from it (from the $scope). When I put it as an argument to request function (with $config - which works okay) it's undefined.

PhoenixS Over a year ago

OK - now I finally succeeded in injecting $rootScope in, my variable is set, but not for the first time, the interceptor is called. First HTTP request is without auth header, but others are okay. Don't you know, how to make it work even for the first time?

PhoenixS · Accepted Answer · 2013-11-20 20:31:32Z

1

OK, so for anybody trying to do the same - Interceptors were the key (thank you Fals a lot), but problem was with the $rootScope. As I wrote in question, when Interceptor was called the first time, $rootScope.apiKey wasn't set yet (on consecutive requests, it was already set).

Right way (or The working way) was to pass variable to AngularJS not through ngInit, but through $window. So I added to my HTML code:

<script>window.apiKey = 'myValue';</script>

and then pass it to Interceptor exactly the same way as $rootScope - You can literally just replace all occurences of $rootScope in edit of my question with $window and now it's working - even for the first request!

Thank you Fals once again.

answered Nov 20, 2013 at 20:31

PhoenixS

1,0261 gold badge9 silver badges23 bronze badges

Collectives™ on Stack Overflow

Globally set custom HTTP header in AngularJS from ngInit

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related