这是一个django的跨域访问问题。 django,会对合法的跨域访问做这样的检验,cookies里面存储的’csrftoken’,和post的header里面的字段”X-CSRFToken’作比较,只有两者匹配,才能通过跨域检验。否则会返回这个错误...

这是一个django的跨域访问问题。
django,会对合法的跨域访问做这样的检验,cookies里面存储的’csrftoken’,和post的header里面的字段”X-CSRFToken’作比较,只有两者匹配,才能通过跨域检验。否则会返回这个错误:CSRF Failed: CSRF token missing or incorrect
解决方法:
由上面的分析可以得出,只要在POST请求的header添加一个字段’X-CSRFToken’,这个字段和cookie里面的‘csrftoken’一样就好了。
在post请求添加一个header,内容如下:
{headers: {'X-CSRFToken': this.getCookie('csrftoken')}
vue中解决方法:
安装cookie插件:
npm install vue-cookies --save
引入vue-cookies:
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
使用Axios发送请求:
this.axios.create({
headers: {'X-CSRFToken': this.$cookies.get('csrftoken'),'Content-Type': 'application/x-www-form-urlencoded'},
}).post('/test',this.testData)
.then(response => {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
参考地址:https://blog.csdn.net/lohiaufung/article/details/80792334
本文标题为:vue post请求后台django接口Forbidden (CSRF token missing or incorrect.)


基础教程推荐
- 在IE中为abbr标签加样式 2022-10-16
- 关于ajax异步访问数据的问题 2023-02-23
- JavaScript垃圾回收机制(引用计数,标记清除,性能优 2022-08-31
- Ajax提交表单并接收json实例代码 2023-02-13
- 解决:layUI数据表格+简单查询 2022-12-16
- AJax 把拿到的后台数据在页面中渲染的实例 2023-02-22
- 原生ajax瀑布流demo分享(必看篇) 2023-02-01
- 纯javascript的ajax实现php异步提交表单的简单实例 2022-12-28
- ajax实现数据分页查询 2023-01-31
- Unicode中的常用字母小结 2022-09-21