经过一天的研究,终于把 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认证了

vue-element-admin 模板 登录页面 post请求通过django的csrf认证,处理304错误的更多相关文章

  1. 使用Vue和djangoframwork完成登录页面构建 001

    使用Vue和djangoframwork完成登录页面构建 001 环境的搭建 首先,我在我的电脑的F盘创建了一个文件夹 forNote,进入到这个文件夹中 F:\forNote> vue环境的搭 ...

  2. elementUI+Vue实现管理系统的登录页面

    <template> <div class="maxbox"> <div id="appp"> <vue-partic ...

  3. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  4. Spring Boot +Vue 项目实战笔记(二):前后端结合测试(登录页面开发)

    前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...

  5. ajax请求session失效重定向到登录页面

    在ajax请求的页面引入一个自定义的AjaxRedirect.js的文件 AjaxRedirect.js的代码如下: $(function(){ $.ajaxSetup({ type: 'POST', ...

  6. 一步一步理解 python web 框架,才不会从入门到放弃 -- 简单登录页面

    上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目 首先,新建一个 Django 项目,记得别弄错了哦. settin ...

  7. [python][django学习篇][11]后台admin用户登录博客,添加文章---这一章和博客首页设计没有关系

    1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型(如果没有这一步,登录http://127.0.0.1:8000/ ...

  8. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  9. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

随机推荐

  1. Grails Controller - respond 方法

    基本用法 官方文档:http://docs.grails.org/latest/ref/Controllers/respond.html 为当前 respond 语句所在 action 所对应的页面返 ...

  2. jenkins-定时跑代码

    build periodically和poll scm都可以定时运行

  3. C语言返回值

    C语言函数在结束的时候可以用一个数字表示运行的结果,这个数字就叫做函数的返回值. 主函数应该有一个返回值.如果这个返回值是0就表示程序希望计算机认为它正常结束,如果不是0就表示程序希望计算机认为它是出 ...

  4. nodejs 模块变量 应用

    exports.allcodeandname=(function(){ var fs = require('fs'); var data = fs.readFileSync(__dirname+'/a ...

  5. <JZOJ5943>树

    一开始t了五个点我就一脸懵逼 然后 发现高级操作... 就是那个tor的数组2333 可以让一些不需要改的不再去改啦 位运算果然是神奇的东西XD 魔性哈哈哈 #include<cstdio> ...

  6. id0-rsa WP合集

    忙里偷闲做做题wwwwwwwwwwwww Intro to Hashing Intro to PGP Hello PGP Hello OpenSSL Intro to RSA Caesar Hello ...

  7. mongoDB连接信息及生成对应的collection生成代码

    .net,个人封装MONGODDB的操作. using System; using System.Collections.Generic; using System.Linq; using Syste ...

  8. 关于JavaScript中的基本类型

    1.在JavaScript的数据中包含以下两种 1 基本类型 Number.Boolean.String.NULL.Undefined 以及ES6的 Symbol 2 引用类型 Object.Arra ...

  9. AI在自动化测试领域的应用

    阿里QA导读:最近一两年随着深入学习技术浪潮的诞生,智能化测试迎来了新的发展,而AI也会引领下一代测试的新航向.Testin云测CTO陈冠诚先生的分享让我们看到AI在移动自动化测试领域里面的创新机会点 ...

  10. 阿里云服务器上搭建seafile专业版

    因为官方一键安装教程在阿里云服务器上无法安装,由于水平有限,无法解决,所以选择手动安装 参考资料: 1,.腾讯云搭建seafile服务器 2.How to Install Seafile with N ...