AngularJS - Unknown provider configuring $httpProvider

Question

In the following code example:

myApp.config(['$httpProvider', function($httpProvider, $cookieStore) {

    $httpProvider.defaults.withCredentials = true;

    $httpProvider.defaults.headers.get['Authorization'] = 'Basic '+ $cookieStore.get('myToken');

    return JSON.stringify(data);

}]);

I get an angularjs error like 'Unknown provider $cookieStore'.

'myApp' has dependenciy and 'ngCookies' and angular-cookies.min.js is laoded, so what's wrong with that code ?

Is that fact that i'm doing this in .config ?

Why don't you also show us your `myApp` initialization code. — Chandermani, Jun 26 '13 at 09:17

score 15 · Accepted Answer · answered Jun 26 '13 at 10:43

Because it's only possible to pass providers when configuring, i have finally done the overwrite of my http parameter not with a request transformer but by creating a service as factory to do requests.

Here is a code example of the service (not tested, just for information):

angular.module('myapp-http-request', []);
angular.module('myapp-http-request')
.factory('MyRequests', function($http, $cookieStore){

    return {
        request: function(method, url, data, okCallback, koCallback){
            $http({
                method: method,
                url: url,
                data: data
            }).success(okCallback).error(koCallback);
        },
        authentifiedRequest: function(method, url, data, okCallback, koCallback){
            $http({
                method: method,
                url: url,
                data: data,
                headers: {'Authorization': $cookieStore.get('token')}
            }).success(okCallback).error(koCallback);
        }
    }
});

And example of usage (not tested, just for information):

angular.module('sharewebapp', ['myapp-http-request'])
.controller('MyController', ['MyRequests', function(MyRequests){
    MyRequests.authentifiedRequest('DELETE', '/logout', '', function(){alert('logged-out');}, function(){alert('error');})
}]);

This has problems too since the headers from the factory will be static. Try logging in, then out, then in again and you'll realize that it's still using the old token. — Rob, May 11 '14 at 16:43

score 2 · Answer 2 · answered Jun 26 '13 at 09:19

2

You probably need to add the cookieStore

myApp.config(['$httpProvider', '$cookieStore', function($httpProvider, $cookieStore)

answered Jun 26 '13 at 09:19

Eduard Gamonal

8,023
5
41
46

already tested and the error disapear but then i got a 'not possible to do get on undefined', i.e $cookieStore is undefined – kij Jun 26 '13 at 09:25
oh that's true. in the config part you can only use providers, whereas in the .run part you can only use instances. i guess cookieStore is not a provider – Eduard Gamonal Jun 26 '13 at 09:26
Damned. Is there another way to dynamically set header when requesting with $http? – kij Jun 26 '13 at 09:31
I think you can transform request and response headers. I haven't tried it myself, though. check "transforming" in http://docs.angularjs.org/api/ng.$http – Eduard Gamonal Jun 26 '13 at 09:34
1

Yep, in fact this code was already put into a transformer, configured onto the $httpProvider. But finally for the reason discovered together, i've solved this problem by creating a service 'RequestService' with 'publicRequest' and 'privateRequest' methods to use $http and automatically add my token parameter to the $http. I'll update my question with the response and a code example. Thanks for your help – kij Jun 26 '13 at 10:27

score 2 · Answer 3 · answered Sep 09 '16 at 04:08

I had ran into this same problem so i'll post how I got around it. I essentially used the $injector module to manual grab an instance of the service I needed. Note this also works for user defined services.

 angular.module('app').
 config(config);

 config.$inject = ['$httpProvider'];

 function config($httpProvider) {
  //Inject using the $injector
  $httpProvider.interceptors.push(['$injector', function($injector){
  return {
    request: function(config) {

      //Get access by injecting an instance of the desired module/service
      let $cookieStore = $injector.get('$cookieStore');

      let token = $cookieStore.get('your-cookie-name');
      if (token) {
        config.headers['x-access-token'] = token;
      }
      return config;
    }
  }
}])
}

score 0 · Answer 4 · edited May 23 '17 at 12:18

0

Using the Module.run() seems to be a cleaner way to set headers that are always needed. See my answer here: AngularJS pass requestVerificationToken to a service

edited May 23 '17 at 12:18

Community

1
1

answered Jan 13 '14 at 15:11

Josh Russo

3,080
2
41
62

AngularJS - Unknown provider configuring $httpProvider

4 Answers4

Linked

Related