禁止（CSRF令牌丢失或不正确。）-即使已包含

Question

I keep getting the above error even though I have included a csrf_token already. I've used the same csrfmiddlewaretoken for my other ajax calls and it works fine but here im getting the forbidden error. Any idea why?

Here's my form:

<form method="post" enctype="multipart/form-data" id="profileImageForm">{% csrf_token %}
    <label for="id_banner_image" class="change_profile_img">change
        <input id="id_banner_image" type="file" name="image" />
    </label>
    <input type="submit">
</form>

Here's my JS:

$(document).on('submit', '#profileImageForm', function(e){
    e.preventDefault();
    var form_data = new FormData();
    var image = document.getElementById('id_banner_image').files[0].name;
    form_data.append('file', image);

    $.ajax({
        type:'POST',
        url: '/change_banner_image/',
        data : {
            form_data: form_data,
            csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
        },
        cache: false,
        contentType: false,
        processData: false,
        success: function(response){
            console.log('Success');
        },
    });
});

Answer 1

When I get weird CSRF errors with Django & Ajax, it's usually 'cause I'm missing these pieces:

https://docs.djangoproject.com/en/1.11/ref/csrf/

Basically, this blob of code, provided in the above docs, will handle most of the getting and passing of CSRF tokens with your ajax calls.

// using jQuery
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;
}
var csrftoken = getCookie('csrftoken');

//Now use it on ajax 
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

Include this on your pages and see if this solves your problems. I'm not sure why this particular piece of code isn't working if you say others do..hard to say without seeing other parts of the project.