angulaire, django et csrf

Question

de http://docs.angularjs.org/api/ng. $ Http, il est dit que nous devrions définir les en-têtes par défaut pour inclure le jeton, donc je suis le suivre.

mon code ressemble à ceci

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){ 
     $routeProvider. 
      when('/', { 
       templateUrl: '/partials/home.html', 
       controller: HomeCtrl 
      }). 
      when('/game/:gameId/shortlist/create',{ 
       templateUrl: '/partials/create-shortlist.html', 
       controller: CreateShortlistCtrl 
      }). 
      otherwise({redirectTo: '/'}); 
    }]); 

myapp.run(function($rootScope, $http, $cookies, $httpProvider){ 
    $http.get('/api/get-current-user').success(function(data){ 
     $rootScope.current_user = data; 
     $rootScope.current_team = $rootScope.current_user.team; 
    }); 
    $http.get('/api/get-current-season').success(function(data){ 
     $rootScope.current_season = data; 
    }); 
    $rootScope.csrf_token = $cookies.csrftoken; 
    console.log($httpProvider.defaults.headers.common); 
    //$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 
}); 

comme vous pouvez le voir, je l'ai appliqué plusieurs approches, mais je suis incapable de mettre en-tête avec jeton CSRF. les deux erreurs que j'ai rencontrées sont

Uncaught Error: Unknown provider: $httpProviderProvider <- $httpProvider

Qu'est-ce que je fais mal?

Answer 1

Si vous utilisez AngularJS 1.1.3 ou plus récent, vous pouvez utiliser xsrfHeaderName et xsrfCookieName:

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){ 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    ... 

Voir $location dans la documentation 1.1.3.

Answer 2

Vous pouvez uniquement utiliser le $httpProvider dans la méthode config. Mais le problème est que vous ne pouvez pas utiliser $cookies dans la méthode de configuration. Là seulement $cookiesProvider est supporté. Cela est décrit (un peu) dans la section Module Loading & Dependencies.

Ce que vous pouvez faire est de définir les en-têtes à l'exécution comme suggéré dans le angularjs.org docs

Donc, pour faire fonctionner votre exemple, vous pouvez effectuer les opérations suivantes:

var myapp = angular.module('myapp', ['ngCookies', 'ui.bootstrap']). 
    config(['$routeProvider', function($routeProvider){ 
     $routeProvider. 
      when('/', { 
       templateUrl: '/partials/home.html', 
       controller: HomeCtrl 
      }). 
      when('/game/:gameId/shortlist/create',{ 
       templateUrl: '/partials/create-shortlist.html', 
       controller: CreateShortlistCtrl 
      }). 
      otherwise({redirectTo: '/'}); 
    }]); 

myapp.run(function($rootScope, $http, $cookies){ 
    // set the CSRF token here 
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 

    $http.get('/api/get-current-user').success(function(data){ 
     $rootScope.current_user = data; 
     $rootScope.current_team = $rootScope.current_user.team; 
    }); 
    $http.get('/api/get-current-season').success(function(data){ 
     $rootScope.current_season = data; 
    }); 
}); 

et ne pas oublier d'inclure le fichier angular-cookies.js dans votre fichier html!

Answer 3

Voici un petit lib qui pourrait le rendre plus simple, https://github.com/pasupulaphani/angular-csrf-cross-domain