这是一个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.)


基础教程推荐
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件 2023-10-29
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- 纯css实现漂亮又健壮的tooltip的方法 2024-01-23
- Bootstrap学习笔记之css组件(3) 2024-01-22
- JSONObject与JSONArray使用方法解析 2024-02-07
- html5视频如何嵌入到网页(视频代码) 2025-01-22
- 创建Vue3.0需要安装哪些脚手架 2025-01-16
- Loaders.css免费开源加载动画框架介绍 2025-01-23
- Django操作cookie的实现 2024-04-15