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

【问题标题】：Forbidden (403) CSRF verification failed. Request aborted. Django + AngularJS禁止 (403) CSRF 验证失败。请求中止。 Django + AngularJS
【发布时间】：2018-11-05 04:40:36
【问题描述】：

我正在运行一个 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 错误？

【问题讨论】：

标签： angularjs django csrf

【解决方案1】：

form标签后面应该有CSRF标记

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

【讨论】：

【解决方案2】：

除非我大错特错，而且由于我对 Angular 知之甚少，我很有可能是，你实际上从未在你的 Javascript 中设置实际的标记。您设置了 cookie，但没有将令牌的值放入其中。您可以使用{{ csrf_token }} 在 HTML 中访问令牌的原始值。

如果我 am 不正确，那么您也有可能没有使用 HTTPS 访问该页面，这可能是由于您设置了CSRF_COOKIE_SECURE = True

【讨论】：