这是一个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.)
基础教程推荐
- Javascript Bootstrap的网格系统,导航栏和轮播详解 2023-08-11
- JS滚动到顶部踩坑解决记录 2023-07-10
- 使用ajax跨域调用springboot框架的api传输文件 2023-02-23
- uniapp开发微信小程序自定义顶部导航栏功能实例 2022-10-21
- HTML clearfix清除浮动讲解 2022-11-20
- 在实战中可能碰到的几种ajax请求方法详解 2023-02-01
- 关于Ajax跨域问题及解决方案详析 2023-02-23
- Ajax发送和接收请求 2022-12-15
- cocos creator游戏实现loading加载页面,游戏启动加载动画 2022-10-29
- Ajax+smarty技术实现无刷新分页 2022-12-15