解决vue项目axios每次请求session不一致的问题


Posted in Javascript onOctober 24, 2020

1、vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
require('es6-promise').polyfill()
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store'
import axios from 'axios' // 1、在这里引入axios 
 
axios.interceptors.response.use(function(res) {
 var res = res.data;
 if(res.status === 403 ) {
 router.push('/')
 return res;
 }
 return res;
}, function(error) {
 return Promise.reject(error);
});
axios.defaults.withCredentials = true; //意思是携带cookie信息,保持session的一致性
Vue.prototype.$axios = axios
Vue.prototype.stringify = require('qs').stringify; 
 
Vue.use(MintUI)
Vue.use(ElementUI);
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

withCredentials为false意思是不携带cookie信息,为保持session的一致性需设置为true;

2、为解决跨域,需要代理

解决vue项目axios每次请求session不一致的问题

3、数据请求

解决vue项目axios每次请求session不一致的问题

补充知识:解决跨域造成Vue-element每次请求sessionID不同问题

vue-element作为前端开发框架, 前后端分离项目ajax跨域, 每次http请求后sessionId均会发生变化,导致获取session失败,

只需要在文件vue-element-admin-master-1\src\utils\request.js中添加如下代码即可:

withCredentials: true,

crossDomain: true

整个axios请求为:

const service = axios.create({
 baseURL: process.env.BASE_API, // api的base_url
 timeout: 5000, // request timeout
 withCredentials: true,
 crossDomain: true
})

以上这篇解决vue项目axios每次请求session不一致的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
jQuery功能函数详解
Feb 01 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
javascript call方法使用说明
2010/01/11 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
电钳专业个人求职信
2014/01/04 职场文书
给同事的道歉信
2014/01/11 职场文书
学校万圣节活动方案
2014/02/13 职场文书
小学安全教育材料
2014/02/17 职场文书
班级德育工作实施方案
2014/02/21 职场文书
志愿者活动总结
2014/04/28 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python