Недопустимый или неверный токен CSRF с использованием JQuery

Question

У меня есть следующий код ниже, но я все равно получаю "CSRF-токен, отсутствующий или неверный". ошибка. кто-нибудь заметил, что я сделал не так?

<form method="post" action="" id="registration"> 
    {{ form.as_p }} 

    <input type="submit" value="{% trans 'Submit' %}" /> 
</form> 


<script> 

$('#registration').submit(function(e){ 
    e.preventDefault(); //prevent default form submit 

    $.ajax({ 

     url: '/accounts/registerAjax/', 
     type: 'POST', 
     contentType: "application/json;charset=utf-8", 
     dataType: "json", 
     data: { 
      'csrfmiddlewaretoken': '{{ csrf_token }}', 
      'id_username': $("#id_username").val(), 
      'id_email': $("#id_email").val() 
      }, 
     success: function() { 
      alert('Test'); 

     }, 
     error: function(errorThrown){ 
      console.log(errorThrown); 
      alert('Error'); 
      alert(errorThrown); 
     } 
    }); 

Answer 1

От the docs.

на каждом XMLHttpRequest, установите собственный заголовок X-CSRFToken на значение токена CSRF.

В качестве первого шага вы должны получить сам токен CSRF. Рекомендуемым источником токена является файл cookie csrftoken, который будет установлен, если вы включили защиту CSRF для своих просмотров, как описано выше.

// 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'); 

Приведенный выше код можно упростить с помощью печенья плагин JQuery для замены getCookie:

var csrftoken = $.cookie('csrftoken');