django - 角度，django 和 csrf

Question

来自http://docs.angularjs.org/api/ng .$http ，它说我们应该设置默认标头以包含令牌，所以我正在关注它。

我的代码是这样的

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;
});

如您所见，我应用了多种方法，但无法使用 csrf 令牌设置标头。我遇到的两个错误是

未捕获的错误：未知提供程序：$httpProviderProvider <- $httpProvider

我究竟做错了什么？

Answer 1

如果您使用 AngularJS 1.1.3 或更新版本，您可以使用xsrfHeaderNameand xsrfCookieName：

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

请参阅文档 1.1.3 中的$location。

Answer 2

您只能$httpProvider在 config-method 中使用。但问题是您不能$cookies在配置方法中使用。仅$cookiesProvider支持。这在“模块加载和依赖项”部分中进行了描述（有点）。

您可以按照angularjs.org 文档中的建议在运行时设置标头

因此，要使您的示例正常工作，您可以执行以下操作：

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;
    });
});

并且不要忘记将angular-cookies.js文件包含在您的 html 文件中！

Answer 3

这是一个小库，可以使这更简单https://github.com/pasupulaphani/angular-csrf-cross-domain