经过一天的研究,终于把 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. NI Vision 介绍

    NI Vision主要包括三种主要软件包: 主程序包(Vision Acquisition Software), 视觉开发模块(Vision Development Module), 以及用于自动检测 ...

  2. C++ 中类的内存布局

    在许多笔试面试中都会涉及到sizeof 运算符的求值问题. 这类问题主要分四类: 基本数据类型,如int,bool,fload,long,long,int * 等,这一类比较简单,但要注意x86和x6 ...

  3. 一次完整的HTTP请求响应过程(很详细)

    一. HTTP请求和响应步骤   图片来自:理解Http请求与响应 以上完整表示了HTTP请求和响应的7个步骤,下面从TCP/IP协议模型的角度来理解HTTP请求和响应如何传递的. 二.TCP/IP协 ...

  4. 百度AI技术

    利用百度提供接口,实现智能语音 语音合成 -- TTS(text to speech) 注册 在 ai.baidu.com 页面中点击 控制台 ,弹出登陆 / 注册页面 创建应用 登陆成功后,点击左侧 ...

  5. C语言学习笔记之获取文件长度

    本文为原创文章,转载请标明出处 #include <stdio.h> #include <stdlib.h> int main() { FILE *inputFile; inp ...

  6. 介绍vue-cli脚手架config目录下index.js配置文件

    1.config/index.js var path = require('path') module.exports = { build: { // production 环境 env: requi ...

  7. 求最长公共子序列-DP问题

    Longest common subsequence problem The longest common subsequence (LCS) problem is the problem of fi ...

  8. Java web期末项目第一阶段成果发表

    摘要 我们做的系统是一个基于Java web与MySQL的食堂订餐系统 班级: 计科二班 小组成员:李鉴宣.袁超 我们的第一阶段主要完成以下三件事: 完成项目的需求分析 完成项目的领域逻辑(domai ...

  9. [洛谷P4556] 雨天的尾巴

    这道题可以用线段树合并做,网上的题解基本上都是线段树合并的. 但是为什么我就偏偏要用dsu on tree...... 题目传送门 dsu on tree的方法类似[CF1009F] Dominant ...

  10. 正则提取关键字符-python代码实现

    原文地址:http://www.bugingcode.com/blog/python_re_extraction_key.html 关于python的正则使用在以前的文章中 http://www.bu ...