Django CSRFToken 中间件附加到 URL 并在向服务器发出“PUT”请求后显示 AJAX 问题

问题描述

我正在开发一个 Django Python/Javascript 项目。 PUT 请求通过客户端完成并发送回服务器。成功发送请求后，页面进行刷新，导致 URL 中的 csrf 令牌中间件暴露。我已经实现了AJAX，返回false，添加了一个event.preventDefault()，通过标题传递了一个cookie fetch 使用了异步函数，并添加了try and catch 语法。而且我不明白为什么它不影响重新提交。提交完成后，我需要停止刷新网页，以便 csrf_token 不会显示附加到 URL。

希望有人能让我知道我在这里没有看到什么。谢谢！

// Set global variables to use in form submission
var id,upt_prodName,upt_prodPrice,upt_prodDescpt;

// Block to populate textarea that allows the user to update product info.
 
 const editProd_view = (response) => {
 
  let prod_id = response.id;
  let edit_name = response.name;
  let edit_price = response.price;
  let edit_descpt = response.description;
 
 
 let prod_idUpt = (document.querySelector("#prod_idUpt").innerHTML = prod_id);
 let new_name = (document.querySelector(
  "#editProdName"
   ).innerHTML = edit_name);
 let new_price = (document.querySelector(
  "#editProdPrice"
   ).innerHTML = edit_price);
 let new_textarea = (document.querySelector(
  "#editProdDescpt"
   ).innerHTML = edit_descpt);
 
 id = prod_id;
 
//On submit,send product info to update the product.

 const edit_prod = (document.querySelector(
  "#editProd_form").onsubmit = async () => {
     try {

// Get all values from textarea to update content.
     upt_prodName = document.getElementById("editProdName").value;
     new_prodPrice = document.getElementById("editProdPrice").value;
     new_prodDescpt = document.getElementById("editProdDescpt").value;
 
     const res = await fetch(
       `/editProduct/${id}`,{
    method: "PUT",headers: {
    "Content-Type": "application/json","X-CSrftoken": getCookie("csrftoken"),},body: JSON.stringify({
      name: upt_prodName,description: upt_prodDescpt,price: upt_prodPrice,}),})
    .then((res) => res.json())
    .then((result) => {
console.log("result ->",result);
    });
} catch (err) {
  console.error("err",err);
}

//Once the post has been submitted,return false to prevent reloading.

 edit_prod.handleForm();
 return false;
 });

return false;
};

解决方法

是的，django里面的post和put，delete需要csrf token，我的解决方案

你可以这样做

<form>
 <button id="onsubmit" method="{{csrf_token}}">submit</button>
</form>

$(document).on(function() {
   $(document).on('click','#onsubmit',function() {
      var token = $(this).attr("method")
      const res = await fetch(
       `/editProduct/${id}`,{
    method: "PUT",headers: {
    "Content-Type": "application/json","X-CSRFToken": token,},body: JSON.stringify({
      name: upt_prodName,description: upt_prodDescpt,price: upt_prodPrice,}),})
    .then((res) => res.json())
    .then((result) => {
console.log("result ->",result);
    });
} catch (err) {
  console.error("err",err);
}
   })
})