angularjs - 禁止 (403) CSRF 验证失败。请求中止。Django + AngularJS

Question

我正在运行一个 Django v1.10.8 项目。我有一个使用 AngularJS v1.5.6 处理的表单。我已将项目放在使用 SSL 的远程服务器上，在 HTTPS 上运行。

当我尝试提交我的自定义登录表单时，我收到此错误：Forbidden (403) CSRF verification failed. Request aborted..

login_register.html登录表格在这里：

<div ng-app="app" ng-controller="Ctrl">
<form method="post" name="loginForm" ng-submit="login()">
    <fieldset ng-disabled="submittingForm">
        <p>
            <input 
                id="{{ login_form.username.id_for_label }}"
                type="email" 
                name="{{ login_form.username.html_name }}"
                placeholder="Email"
                ng-model="login.email"
                required>
        </p>
        <p>
                <input 
                    class="form-control" 
                    id="{{ login_form.password.id_for_label }}" 
                    name="{{ login_form.password.html_name }}"
                    placeholder="{% trans 'Password (8+ characters)' %}"
                    type="[[[ login.showPW ? 'text' : 'password' ]]]" 
                    ng-minlength="{{ min_pw_length }}" 
                    ng-maxlength="{{ max_pw_length }}" 
                    ng-model="login.pw"
                    required 
                >               
        </p>
        <button class="btn btn-primary" type="submit" ng-disabled="!login.email || !login.pw">{% trans "Log in" %}</button>
    </fieldset>
</form>
</div>

login-register.js：

var app=    angular.module("app",[]);
app.config(function($interpolateProvider, $httpProvider){
    $interpolateProvider.startSymbol("[[[");
    $interpolateProvider.endSymbol("]]]");

    $httpProvider.defaults.xsrfCookieName=  "csrftoken";
    $httpProvider.defaults.xsrfHeaderName=  "X-CSRFToken";
});

app.controller("Ctrl", function($scope, $http, $window){
    $scope.loginError=  '';

    $scope.login= function(){
        $scope.submittingForm=  true;
        $scope.loginError=  '';
        var formData=   {
            "username": $scope.login.email,
            "password": $scope.login.pw
        };
        $http.post(
            "login", 
            JSON.stringify(formData)
        ).success(function(response){
            if (response.success === false){
                $scope.loginError=  response.err_msg;
                $scope.submittingForm=false;
                return;
            }
            $window.location.href=  GLOBAL_paths.home;
        });
    };
});

这是我的摘录local_settings.py：

SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_HTTPONLY = True
X_FRAME_OPTIONS = "DENY"
SECURE_HSTS_SECONDS = 60
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_BROWSER_XSS_FILTER = True
SECURE_SSL_REDIRECT = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True

尽管在 JS 中设置了 CSRF 令牌，为什么我会收到此 403 错误？

标签： angularjsdjangocsrf

Answer 1

表单标签后应该有一个CSRF令牌

<form method="post" name="loginForm" ng-submit="login()">
{% csrf_token %}