vue-element-admin 模板登录页面 post请求通过django的csrf认证，处理304错误

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

经过一天的研究，终于把 vue-admin-template 模板的 post 请求和django的api 弄通了没有了那该死的304报错了

直接贴代码：

在main.js中我直接给设置了一个 csrf_token 全局变量来接收 csrf 认证的token

window.csrf_token ='' //声明csrf_token 的全局变量

然后在 api 接口中设置 post方法的

headers 请求头

headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': csrf_token},

export function login(data) {
return request({
url: '/api/user/login/',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': csrf_token},
params:{'username':data.username,'password':data.password}
})
}

api接口获取csrf_token的接口方法

import request from '@/utils/request'export function get_csrf() {
return request({
url: '/api/get_csrf',
method: 'get',
})
}

在系统加载登录页面时先想后台发送get请求来获取 csrf_token 中的token

methods:{
get_token(){
get_csrf().then(res => {
// console.log(res.token)
csrf_token = res.token //将得到的token 赋值给全局变量
})
}
},
created(){
this.get_token() //获取csrf_token
this.get_user() //获取用户列表
}

这前台页面都设置好了

后台views中创建 get_csrf 的接口用来动态获取token

from django.middleware.csrf import get_token# csrf认证
def get_csrf(request):
# 生成 csrf 数据，发送给前端
csrf_token = get_token(request)
return JsonResponse({'token':csrf_token,'code':200})

这样前台的所有post的请求就可以通过csrf认证了