Vue3与Django中Axios POST请求JWT遇403问题及解决

问题背景 #

我搭建了一个Django后端应用，其API接口可以生成JWT令牌并将其存入Cookie；前端使用Vue3开发，需要通过表单提交用户数据到后端，从而获取JWT并设置到Cookie中。但在发送请求时，控制台始终抛出403 Forbidden错误，前后排查了4个多小时才找到原因。

前端请求代码片段 #

try {
    const response = await axios.post('link/', UserData)
    const jwtToken = response.data.jwt
    Cookies.set('jwt', jwtToken)
    this.confirmed = true
    console.log(this.confirmed)
}
catch(error) {
    console.log(error)
}

已排除的可能性 #

• 所有前端依赖（axios、js-cookie等）均已正确导入
• 后端API本身功能正常，在接收合法请求时会返回JWT（为排查临时暴露该字段，生产环境请勿这么做）

问题根源 #

最终发现问题出在Vue表单的实现上：表单输入标签未添加v-model指令。

由于缺少v-model绑定，用户在表单中输入的数据并没有同步到请求参数UserData中，导致发送给后端的请求参数为空或者不符合后端的校验规则，触发了Django的权限验证（比如CSRF校验失败、必填参数缺失），因此返回了403错误。

解决方法 #

为表单的所有输入标签添加v-model，绑定对应的UserData字段，确保用户输入能正确同步到请求参数中。修改后，请求参数符合后端要求，API正常返回JWT，403问题解决。

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