javascript post django表单给出csrf错误答案

【问题标题】：javascript post django form gives csrf errorjavascript post django表单给出csrf错误
【发布时间】：2017-07-19 17:46:34
【问题描述】：

我有一个像这样的 html 表单：

<form id="comment" action="{% url "url_name" ur.id %}" method="post">{% csrf_token %}
    <textarea required="required" maxlength="255" rows="4" class="form-control" name="comment">
    </textarea>
    <button class="btn btn-default" onclick="add_comment(event)">Comment</button>
</form>

这是一个 html 表单，而不是 django's 表单。

这里我在表格中包含了csrf token。我已经发布了这个表单表单，现在它给了我csrf verification failed 错误。

我在这里缺少什么？是否必须从 django 的表单类创建表单才能使用 csrf 令牌？

需要帮助

我的 js 看起来像：

function add_comment(event) {
    event.preventDefault()

    var form = document.getElementById('comment')

    var url = form.action
    var method = form.method

    var form_data = new FormData(form)

    fetch(url, {method: method, body: form_data})

}

我只是从我的 django 视图中渲染一个模板

当我看到请求网络时，csrf 令牌和注释作为请求负载传递..

【问题讨论】：

给我们你的javascript代码和意见..
@SancaKembang 我已经更新了问题
您遇到的问题与 CSRF 令牌未作为表单提交的一部分传递有关。我对 fetch 不太熟悉，因为我一直使用 AJAX，但这是你出错的地方。抱歉，我无法提供更多帮助。

标签： javascript django forms

【解决方案1】：

GitHub issue 建议您必须包含凭据，以便 CSRF cookie 与请求一起发送。

fetch(url, {method: method, body: form_data, credentials: 'include'})

【讨论】：

【解决方案2】：

我假设您正在使用 AJAX 发布表单。当使用 Django 使用 AJAX 发布表单时，您需要在提交 AJAX 请求之前将以下内容添加到您的 Javascript：

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) {
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        } 
        return cookieValue;
        }
        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            // Only send the token to relative URLs i.e. locally.
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    } 
});

【讨论】：