带有 django 的 JQuery AJAX 获取 csrf 错误 403答案

【问题标题】：JQuery AJAX with django getting csrf error 403带有 django 的 JQuery AJAX 获取 csrf 错误 403
【发布时间】：2021-02-13 13:10:33
【问题描述】：

Getting Error CSRF 验证失败。请求中止。缺少或不正确的令牌。我是 JQuery 的新手，不确定它是否会导致我的错误。我想我正确地传递了请求。接受 Cookie，更简单的 JQuery 请求更早地工作。

观看次数

def testcall(request):
    text = request.POST['text']
    if request.method == 'POST' and request.POST['action'] == 'start_function1':
        function1(text)
        response = text + "has been successful"
        return HttpResponse(response)
    if request.method == 'POST' and request.POST['action'] == 'start_function2':
        function2(text)
        response = text + "has been successful"
        return HttpResponse(response)

模板

<html>
<head>
    <title>Test Data</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
            jQuery(document).ready(function($){
            $('demo-form').on('submit', function(event){
                event.preventDefault();
                var text = document.getElementById('text-to-analyze').value;
                $.ajax({
                    url : '{{ 'my-ajax-testsub/' }}',
                    type : "POST",
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        text: text,
                        action: 'start_function1'
                    },
                    success: function callback(response){
                           alert(response);
                           },
                    });
            })})
            jQuery(document).ready(function($){
            $('demo-form').on('submit', function(event){
                event.preventDefault();
                var text = document.getElementById('text-to-analyze').value;
                $.ajax({
                    url : '{{ 'my-ajax-testunsub/' }}',
                    type : "POST",
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        text: text,
                        action: 'start_function2'
                    },
                    success: function callback(response){
                           alert(response);
                           },
                });
            })})
    </script>
</head>
<body>
    <form name="demo-form" method="POST" action="{% url 'home' %}">
        <p>Input field: <input type="text" id="text-to-analyze" value="name@gmail.com"></p><br>
        <button class="btn btn-success" name="start_function1">Function</button>
        <button class="btn btn-success" name="start_function2">Function</button>
    </form>
</body>
</html>

【问题讨论】：

标签： jquery django ajax csrf

【解决方案1】：

这不是你渲染 csrf_token 的方式，你必须使用{% csrf_token %}。所以目前，它将 csrf_token 作为空白发送。

但无论如何，这并不重要。您必须在呈现后从 HTML 中获取 csrf_token。因为 Django 将 {% csrf_token %} 替换为 unique 令牌（实际上是 input），所以无论如何它都是不正确的。

data: {
    csrfmiddlewaretoken: $($('input[name="csrfmiddlewaretoken"]').attr('value')),
    text: text,
    action: 'start_function1'
},

即使这样也可能行不通。您可能需要将其设置为标题。

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Csrf-Token', token);
    }
});
[...]
    data: {
        csrfmiddlewaretoken: $($('input[name="csrfmiddlewaretoken"]').attr('value')),
        text: text,
        action: 'start_function1'
    },
[...]

【讨论】：

感谢您的回复，感谢您的帮助。我仍然无法通过您的回答避免 csrf 错误。