django отправка AJAx POST-запроса с использованием классического javascript на сервер с помощью csrf_token, как?

Question

У меня есть эта часть кода:

document.querySelector('#form_pizza_order').onsubmit = () => {

    // make an ajax request to save the pizza order in the server
   const request = new XMLHttpRequest();
   request.open('POST', '/order_pizza');

   // Callback function for when request completes
   request.onload = () => {
       const data = JSON.parse(request.responseText);

       if (data.success) {
        // show in cart new order
        show_in_cart(data);
       }
       else {
           alert('failed to save pizza order in server');
       }
   }

   const data = new FormData();
   let username = localStorage.getItem('username');
   data.append('username', username);

   //Send request
   request.send(data);
   return false;
};

, что при использовании сервер возвращает 403 запрещенного ответа из-за того, что csrf_token не отправлен. как правильно добавить заголовок crsf_token с javascript выше, без использования jquery. просто javascript.

спасибо.

Answer 1

следующий код сделал это возможным:

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 = cookies[i].trim();
            // 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;
}

function sendData(){
    const XHR = new XMLHttpRequest();
    // Set up our request
    var csrftoken = getCookie('csrftoken');
    XHR.open("POST", "/order_pizza" );
    XHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
    XHR.setRequestHeader('X-CSRFToken', csrftoken)
    // Bind the FormData object and the form element
    let FD = new FormData();
    // append the token
    FD.append('csrfmiddlewaretoken', csrftoken);

    let username = localStorage.getItem('username');
    FD.append('username', username);

    // The data sent is what the user provided in the form
    XHR.send(FD);
}

очевидно, нам сначала нужно было извлечь команду csrf cook ie, прежде чем мы могли использовать ее в качестве данных формы.

Answer 2

function sendData(){
    const XHR = new XMLHttpRequest();
    // Set up our request
    XHR.open("POST", "{% url 'test:index' %}" );
    XHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
    // Bind the FormData object and the form element
    let FD = new FormData(form);
    // append the token
    FD.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    // The data sent is what the user provided in the form
    XHR.send(FD);
}

let form = document.getElementById('<form_id>')

//  take over its submit event.
form.addEventListener("submit", function (event) {
    console.log('Submited!')
    event.preventDefault();
    sendData();
})

В ваших django представлениях вы можете проверить, является ли запрос ajax:

def index(request):
    if request.is_ajax() and request.method='POST':
        print(request.POST)
        # process post data

Django, используйте X-Requested-With для обнаружения запроса ajax, возьмите как django обнаружение ajax запрос sendData функция основана на Mozilla Docs