经过一天的研究,终于把 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. Office 365管理中心门户

    一.使用Office 365管理员账户登陆到由世纪互联运营的Office 365 登陆地址 https://portal.partner.microsoftonline.cn 1.登陆完成后,选择左上 ...

  2. javascript 获取 sx:datetimepicker 的值

     <div align="center"><sx:datetimepicker label="Start_Time" id="S ...

  3. Leetcode1_两数之和

    题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同 ...

  4. 64)PHP,变量的生命周期

    在20day  05 假如我目前在的地址是上面的那个index.php?p=back&c=Admin&a=check  这个请求里面申请的所有事 或者是你申请的所有变量或者是全局变量都 ...

  5. F. Moving On

    http://codeforces.com/gym/102222/problem/F fory #include<bits/stdc++.h> using namespace std; t ...

  6. OpenCV 特征描述

    #include <stdio.h> #include <iostream> #include "opencv2/core/core.hpp" #inclu ...

  7. 听《Sara》

    Sara这首歌太好听了,虽然没有清楚具体是唱什么,但我感觉是讲一个故事,很好奇,我找到了歌词. Sara 塞拉 鲍勃迪伦 I laid on a dune, I looked at the sky, ...

  8. numpy中的ndarray与pandas中的series、dataframe的转换

    一个ndarray是一个多维同类数据容器.每一个数组有一个dtype属性,用来描述数组的数据类型. Series是一种一维数组型对象,包含了一个值序列,并且包含了数据标签----索引(index). ...

  9. 苹果联合创始人高调宣布弃用Facebook是什么梗?

    这段时间,扎克伯格非常郁闷.泄密丑闻不仅让Facebook股价大跌.引来审查等,还被众多互联网.科技大佬批判.孤立.如,"钢铁侠"马斯克就直接删除了SpaceX 和特斯拉的 Fac ...

  10. RPC 框架性能大比拼

    Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. Motan 是新浪微博开源的一个Java ...