【问题标题】:How to fix "Forbidden (403) CSRF verification failed. Request aborted." error in django如何修复“禁止 (403) CSRF 验证失败。请求中止。” django中的错误
【发布时间】:2019-08-29 13:38:55
【问题描述】:

我收到了标题中的这个常见错误。我正在 Django 中的虚拟环境文件夹中做一个项目。

setting.py:

        MIDDLEWARE = [
            'django.middleware.security.SecurityMiddleware',
            'django.contrib.sessions.middleware.SessionMiddleware',
            'django.middleware.common.CommonMiddleware',
            'django.middleware.csrf.CsrfViewMiddleware',
            'django.contrib.auth.middleware.AuthenticationMiddleware',
            'django.contrib.messages.middleware.MessageMiddleware',
            'django.middleware.clickjacking.XFrameOptionsMiddleware',
        ]

index.html:

        {% load static %}
        <!DOCTYPE html>
        <html>

        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Instapic</title>
            <link rel="stylesheet" href="{% static 'assets/bootstrap/css/bootstrap.min.css' %}">
            <link rel="stylesheet" href="{% static 'assets/css/Login-Form-Clean.css' %}">
            <link rel="stylesheet" href="{% static 'assets/css/styles.css' %}">
        </head>

        <body>
            <div class="login-clean">
                <form method="post">
                    {% csrf_token %}

                    <h2 class="sr-only">Login Form</h2>
                    <div class="illustration">
                            <div style="display: none" id="errors" class="well form-error-message"></div>
                            <img src="{% static 'assets/img/logo.jpg' %}">
                    </div>
                    <div class="form-group">
                        <input class="form-control" id="username" type="text" name="username" required="" placeholder="Username" maxlength="20" minlength="4">
                    </div>
                    <div class="form-group">
                        <input class="form-control" id="email" type="email" name="email" required="" placeholder="Email" maxlength="100" minlength="6">
                    </div>
                    <div class="form-group">
                        <input class="form-control" id="password" type="password" name="password" required="" placeholder="Password" maxlength="20" minlength="6">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-block" id="go" type="submit">Create Account</button>
                    </div><a href="#" class="forgot">Already got an account? Login here ...</a></form>
            </div>
            <script src="{% static 'assets/js/jquery.min.js' %}"></script>
            <script src="{% static 'assets/bootstrap/js/bootstrap.min.js' %}"></script>
            <script src={% static "assets/js/django-ajax.js" %}></script>
            <script type="text/javascript">
                $(document).ready(function() {
                $('#go').click(function() {
                $.post("ajax-sign-up",
            {
                username: $("#username").val(),
                email: $("#email").val(),
                password: $("#password").val()
            },
            function(data, status){
            if (JSON.parse(data).Status == 'Success') {
                window.location = '/';
            } else {
                $('#errors').html("<span>" + JSON.parse(data).Message + "</span>")
                $('#errors').css('display', 'block')
            }
            });
                return false;
                })
        })
            </script>
        </body>

        </html>

我在我的 html 文件中添加了 {% csrf_token %} 试图解决这个问题 - 没用。我在网上找到了这个标签示例:

&lt;input type="hidden" id="csrf_token" value='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'&gt;.

很遗憾,我不知道如何使用它来修复我的错误。 感谢帮助

【问题讨论】:

  • 这发生在什么时候?单击#go按钮时?你读过this
  • 如果不是在您的 ajax 发布请求中单独传递字段,您只需获取表单数据(其中包括 csrftoken),这可能会更容易。或者您按照我在之前评论中给出的链接中的说明进行操作。
  • 我没明白

标签: python django csrf django-csrf csrf-token


【解决方案1】:

我猜,不是发布表单,而是发布值。 您需要在执行 $.post() 语句时添加 csrfmiddlewaretoken 键。

这是未经测试,但它可能会解决您的问题

  csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value

 csrfmiddlewaretoken: $('[name=csrfmiddlewaretoken]').val()

通过更新将这一行添加到 HTML 文件中

$.post("ajax-sign-up",
    {
        username: $("#username").val(),
        email: $("#email").val(),
        password: $("#password"),
        csrfmiddlewaretoken: $('[name=csrfmiddlewaretoken]').val()
    },

更新的代码是:

    {% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instapic</title>
    <link rel="stylesheet" href="{% static 'assets/bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/Login-Form-Clean.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/styles.css' %}">
</head>

<body>
    <div class="login-clean">
        <form method="post">
            {% csrf_token %}

            <h2 class="sr-only">Login Form</h2>
            <div class="illustration">
                    <div style="display: none" id="errors" class="well form-error-message"></div>
                    <img src="{% static 'assets/img/logo.jpg' %}">
            </div>
            <div class="form-group">
                <input class="form-control" id="username" type="text" name="username" required="" placeholder="Username" maxlength="20" minlength="4">
            </div>
            <div class="form-group">
                <input class="form-control" id="email" type="email" name="email" required="" placeholder="Email" maxlength="100" minlength="6">
            </div>
            <div class="form-group">
                <input class="form-control" id="password" type="password" name="password" required="" placeholder="Password" maxlength="20" minlength="6">
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block" id="go" type="submit">Create Account</button>
            </div><a href="#" class="forgot">Already got an account? Login here ...</a></form>
    </div>
    <script src="{% static 'assets/js/jquery.min.js' %}"></script>
    <script src="{% static 'assets/bootstrap/js/bootstrap.min.js' %}"></script>
    <script src={% static "assets/js/django-ajax.js" %}></script>
    <script type="text/javascript">
        $(document).ready(function() {
        $('#go').click(function() {
        $.post("ajax-sign-up",
    {
        username: $("#username").val(),
        email: $("#email").val(),
        password: $("#password").val(),
        csrfmiddlewaretoken: $('[name=csrfmiddlewaretoken]').val()
    },
    function(data, status){
    if (JSON.parse(data).Status == 'Success') {
        window.location = '/';
    } else {
        $('#errors').html("<span>" + JSON.parse(data).Message + "</span>")
        $('#errors').css('display', 'block')
    }
    });
        return false;
        })
})
    </script>
</body>

</html>

【讨论】:

  • 我应该在哪里添加这个? settings.py?
  • 您的 HTML 文件中没有。我更新了你可以检查的代码。
  • 尝试@dirkgroten 解决方案,在这种情况下它是更好的解决方案。
【解决方案2】:

如果您只是发布 ID 为 signup-form 的 HTML 表单的内容(将其添加到 &lt;form&gt;),并且您的表单具有 {% csrf_token %},那么您可以在 ajax 中使用:

$.post("ajax-sign-up", $("#signup-form").serialize(), function(data, status){...})

【讨论】:

  • 看你自己的HTML模板,你已经自己写了$.post("ajax-sign-up")...!我只是建议提交所有表单字段,而不是您明确编写的 3 个。
  • 请参阅下面@somil 的答案,它已为您详细说明。但请花点时间阅读链接,直到您完全理解为止。
猜你喜欢
  • 1970-01-01
  • 2018-11-05
  • 2016-08-27
  • 2017-06-26
  • 2018-06-06
  • 2016-05-12
  • 2019-07-22
  • 2017-08-06
相关资源
最近更新 更多