Django+Vue+Axios POST请求遇403 CSRF令牌错误问题排查与解决

AI 小北

2026-8-1

问题分析与解决

为什么CSRF token提示不正确？

你只配置了Axios读取csrftoken Cookie，但没指定把token放到后端要求的请求头里，Django默认只识别X-CSRFToken这个请求头中的token，Axios默认的请求头名称不匹配，导致后端收不到正确的验证token，因此返回403错误。此外还可能存在跨域请求未携带Cookie、Cookie中csrftoken本身不存在或无效的情况。

原因解释

Django的CSRF保护机制要求：POST请求必须同时携带两个内容——Cookie中的csrftoken，以及请求头中对应的X-CSRFToken值，后端会校验两者是否一致。你的Axios请求仅指定了从哪个Cookie取token，但没告诉Axios把token放到正确的请求头里，后端无法获取到匹配的验证值，因此触发CSRF验证失败。

解决步骤

修正Axios请求配置
在POST请求的配置中添加xsrfHeaderName: 'X-CSRFToken'，如果是跨域场景，还需加上withCredentials: true确保Cookie被携带：

axios.post(`${BACKEND_PATH+LOCK_PATH+this.current_cm.id}/`, this.current_cm, {
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: 'X-CSRFToken',
    withCredentials: true // 跨域时必填，同域可省略
})

修复定时器拼写错误
代码中mounted里存储定时器的变量是this.intervall，但beforeDestroy里清除的是this.interval，拼写不一致会导致组件销毁后定时器仍在运行，修正为：
```
beforeDestroy() {
    clearInterval(this.intervall);
}
```
确认csrftoken Cookie存在
打开浏览器开发者工具的Application标签，查看Cookies列表中是否有csrftoken。如果没有，在渲染Vue页面的Django模板中添加{% csrf_token %}标签，确保页面加载时Django正确设置该Cookie。
后端中间件检查（可选）
确认Django项目的settings.py中，django.middleware.csrf.CsrfViewMiddleware在中间件列表内（默认已启用），这是CSRF验证的基础。