javascript post django form给csrf错误

Question

I have a html form like:

<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>

It is a html form and not django's form.

Here I have included csrf token in the form. I have post this form form javascript and now it gives me csrf verification failed error.

What am I missing here ? Is it mandatory to create form from django' form class to use csrf token ?

Need help

My js looks like:

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})

}

and I am just rendering a template from my django view

When I see request network, csrf token and comment are passed as request payload ..

Answer 1

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

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

Answer 2

I assume you're using AJAX to post the form. When posting forms with Django using AJAX you need to add the following to your Javascript before submitting the AJAX request:

$.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'));
        }
    } 
});

More info can be found at https://docs.djangoproject.com/en/1.10/ref/csrf/#ajax