Django POST请求CSRF Token无效及/favicon.ico未找到问题求助

核心问题：CSRF Token长度错误导致403 #

你遇到的Forbidden (CSRF token from POST has incorrect length.)错误，根源是前端传给后端的token值无效——{{ csrf_token }}模板标签渲染出来的是完整的input标签，不是纯token字符串，直接赋值给token变量的话，传的是整个标签文本，自然不符合Django对token长度的要求。

正确获取CSRF Token的三种方式 #

• 原生JS提取：如果页面已经通过{% csrf_token %}渲染了隐藏的csrf input，直接提取它的value值：

  let token = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
  

• 模板直接赋值：在模板的script标签里直接输出纯token值（注意用引号包裹，避免特殊字符问题）：

  <script>
    const token = "{{ csrf_token }}";
  </script>
  

• 从Cookie读取：Django会把CSRF Token存在csrftoken Cookie中，可通过原生JS读取：

  function getCookie(name) {
      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.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }
  const token = getCookie('csrftoken');
  

修改后的请求代码示例 #

// 先正确获取token
let token = document.querySelector('input[name="csrfmiddlewaretoken"]').value;

let formData = new FormData();
formData.append("name", name);
formData.append("gewinde", gewinde);
formData.append("laenge", laenge);
formData.append("durchmesser", durchmesser);
//formData.append("containerNR", containerNR);
formData.append('csrfmiddlewaretoken', token);

fetch('/ausgeben/',{
    method: 'POST',
    body: formData
})
.then(response => {
    // 增加响应处理，方便调试和反馈
    if (response.ok) {
        console.log("数据提交成功");
        // 可选：提交成功后刷新页面或跳转
        window.location.reload();
    } else {
        response.text().then(text => console.error("提交失败:", text));
    }
})
.catch(err => console.error("请求异常:", err));

次要问题：NotFound: /favicon.ico #

这个提示是浏览器自动请求网站根目录的图标文件，Django找不到所以报错，不影响功能。要解决的话：

• 将favicon.ico文件放到项目的static文件夹下
• 在基础模板的<head>中添加：

  {% load static %}
  <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
  

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