django + vue-admin-template解决CSRF Failed: CSRF token missing or incorrect 问题
vue-admin-template
PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/vue-admin-template

·
背景:vue使用Network进行登录的时候 报错 403,但是在localhost的时候就没问题,进行了一下对比,network header中多了一个cookie,local中就没有,再结合django默认有csrf跨站点请求伪造,翻了翻文档,得知需要在header中添加X-CSRFToken,解决办法如下:
解决办法:
在vue-admin-template utils/request.js中加入获取csrftoken的方法
原先的方法是在有token的情况下vue才会在header中加入token,但是登录的时候是没有token状态的,所以添加一下csrftoken就可以了
vue-admin-template
PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/vue-admin-template
const getCookie = function(name) {
var value = '; ' + document.cookie
var parts = value.split('; ' + name + '=')
if (parts.length === 2) return parts.pop().split(';').shift()
}
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
config.headers['Authorization'] = 'Token ' + getToken()
config.headers['X-CSRFToken'] = getCookie('csrftoken')
} else {
config.headers['X-CSRFToken'] = getCookie('csrftoken')
}
return config
},




PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:6 个月前 )
4c18a3f4 - 3 年前
714ded11 - 4 年前
更多推荐
相关推荐
查看更多
vue-admin-template

PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
vue-admin-template

Vue 轻量级后台管理系统基础模板
vue-admin-template

webpack修改为vite项目示例
所有评论(0)