Django+JavaScript Todo App删除笔记时出现getCSRFToken未定义错误的解决咨询
2026-4-7
Django+JavaScript Todo App删除笔记时出现getCSRFToken未定义错误的解决咨询
看起来你遇到的问题非常明确——你在JavaScript代码里调用了getCSRFToken()函数，但这个函数你完全没有定义，所以浏览器控制台才会抛出Uncaught ReferenceError: getCSRFToken is not defined的错误。下面我们一步步解决这个问题，顺便给你提几个潜在的优化点：
1. 解决CSRF Token获取的核心问题
Django提供了几种安全获取CSRF Token的方式，这里给你推荐两种最常用的方案：
方案一：定义缺失的getCSRFToken函数
Django默认会把CSRF Token存储在名为csrftoken的Cookie中，我们可以写一个函数从Cookie里提取它。把这段代码放在你的main.js文件最开头（或者在调用getCSRFToken()之前的任意位置）：
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(); // 匹配csrftoken开头的Cookie if (cookie.substring(0, 10) === 'csrftoken=') { cookieValue = decodeURIComponent(cookie.substring(10)); break; } } } return cookieValue; }
添加之后，你原来的fetch代码就能正常调用getCSRFToken()获取Token了。
方案二：直接在模板中渲染全局CSRF Token（更简单）
如果你觉得写Cookie解析函数麻烦，可以直接在Django模板里把CSRF Token渲染成全局变量，供JS直接使用：
在你的HTML模板的<head>标签里添加这段代码：
<script> // 把Django的CSRF Token挂载到全局window对象上 window.CSRF_TOKEN = "{{ csrf_token }}"; </script>
然后修改你JS里的fetch请求头部分，直接使用这个全局变量：
fetch(`${delUrl}/${noteId}`, { method: "POST", headers: { "X-CSRFToken": window.CSRF_TOKEN, // 直接用全局变量 }, })
这种方式更简洁，不需要额外写Cookie解析逻辑。
2. 修复HTML中的潜在问题
虽然这不是当前报错的原因，但你的HTML代码里有一个不符合规范的点：
你在{% for note in notes %}循环里给每个删除按钮都加了id="deleteBtn"，但HTML中id属性必须是唯一的——同一个页面里不能有多个相同id的元素。
你可以直接删掉这个重复的id，因为你的JS逻辑是通过class="delete-btn"来判断点击的按钮，完全不需要依赖id：
<button class="delete-btn"> <img src="{% static 'images/delete.svg' %}" alt="Delete this note" /> </button>
3. 额外检查点
确保你的Django视图函数：
- 正确处理
POST请求（因为你用了method: "POST"） - 成功时返回符合预期的JSON响应，比如
{"status": "success"} - 已经通过
@csrf_exempt之外的方式处理了CSRF验证（当然，你已经在请求头里带了Token，所以只要视图是正常的Django视图就没问题）
内容来源于stack exchange
