403问题的出现的根源在于,
token可以尽量保护网站不受恶意攻击,表单的话很简单,{% csrf_token %}就可以了,ajax就很麻烦,官网也明确表示这很不方便
具体来说,你访问的每个django动态页面的cookie 里面,都有一个csrftoken的值。
当用户进行敏感操作,比如post的时候,后台会比对提交过来的请求头里面的token(默认是没有的),是否与cookie里面的token一致。
这是官网提供的获取token值的函数,这里我用在vue2.6中,更改了一下格式。
//这个函数在methods:{}中
getCookie: function(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();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
},
而请求头是一个字典,所以我们在进行asiox.post操作时,提前在asiox请求头中加入token值
//这是一个提交函数,依旧在methods:{}中
upBud: function(){
url = "输入你用的路径"
postdata ={}
//请求头验证token
token = this.getCookie('csrftoken')
axios.defaults.headers.common["X-CSRFToken"] = token
axios.post(url,postdata).then(response =>{
// post 成功,response.data 为返回的数据
console.log("ok")
}),err => {
// 请求失败
console.log(error)
};
}
因为settings.py默认设置是:
CSRF_HEADER_NAME = "HTTP_X_CSRFTOKEN"
所以不要瞎改,比如说下面这个,这样是通不过验证的,名字必须得对应。
axios.defaults.headers.common["Token"]
正常情况下,vue drf发送一个post请求应该是这样的
一个请求头(request headers)同时包含cookie中的csrftoken和X-CSRFToken,并且他们的值一样。
这样就不会出现403错误了。
官网文档介绍(纯js,没有vue)