时间戳

首页 > 解决方案 > django 使用经典 javascript 将 AJAx POST 请求发送到带有 csrf_token 的服务器，如何？

javascript - django 使用经典 javascript 将 AJAx POST 请求发送到带有 csrf_token 的服务器，如何？

问题描述

我有这部分代码：

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

使用时，由于未发送 csrf_token，服务器返回 403 禁止响应。如何在不使用 jquery 的情况下使用上面的 javascript 正确添加 crsf_token 标头。只是JavaScript。

谢谢。

标签： javascriptdjango

解决方案

以下代码实现了它：

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 cookie，然后才能将其用作表单数据。

推荐阅读