Django项目中前端Fetch发送POST请求如何传递CSRF令牌？

当你用fetch发送Content-Type: application/json的POST请求时，Django不会自动从表单或Cookie中读取CSRF令牌，仅设置credentials: "same-origin"不足以通过验证，需要手动在请求头中添加CSRF令牌。

解决步骤： #

1. 从Cookie中获取CSRF令牌
   Django默认会在用户登录后设置名为csrftoken的Cookie，你可以通过JS读取这个Cookie的值：

   function getCsrfToken() {
     let cookieValue = null;
     if (document.cookie && document.cookie !== '') {
       const cookies = document.cookie.split(';');
       for (let i = 0; i < cookies.length; i++) {
         const cookie = cookies[i].trim();
         if (cookie.startsWith('csrftoken=')) {
           cookieValue = decodeURIComponent(cookie.substring('csrftoken='.length));
           break;
         }
       }
     }
     return cookieValue;
   }
   

2. 修改fetch请求，添加CSRF令牌头
   在你的请求中加入X-CSRFToken头，并保留credentials: 'same-origin'以确保Cookie被发送：

   async function getCustomerInDeliveryDate(deliveryDate : String) {
       const csrfToken = getCsrfToken();
       const response = await fetch('getCustomerInTripDate', {
           method : 'POST',
           credentials: 'same-origin',
           headers : {
               'Content-Type' : 'application/json',
               'X-CSRFToken': csrfToken
           },
           body: JSON.stringify({
               deliveryDate :  deliveryDate
           }),
       });
       return response
   }
   

补充说明： #

• 如果你是在Django模板中编写JS，也可以直接通过模板标签获取CSRF令牌：

  const csrfToken = '{{ csrf_token }}';
  

  这种方式不需要从Cookie中解析，更直接。
• 确保你的后端视图没有额外的CSRF验证配置冲突，你的GetCustomerInTripDate视图继承了LoginRequiredMixin，只要CSRF令牌正确，就能正常处理请求。

内容的提问来源于stack exchange，提问作者jxw