解决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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
JSONP基础知识详解
Mar 19 Javascript
javaScript封装的各种写法
Aug 14 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
解决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
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
destoon复制新模块的方法
2014/06/21 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
pytorch masked_fill报错的解决
2020/02/18 Python
基于python3实现倒叙字符串
2020/02/18 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python Pexpect模块的使用
2020/12/25 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
全球工业:Global Industrial
2020/02/01 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
金山毒霸系列的笔试题
2013/04/13 面试题
优秀演讲稿范文
2013/12/29 职场文书
党员批评与自我批评
2014/10/15 职场文书
复兴之路观后感
2015/06/02 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
python缺失值填充方法示例代码
2022/12/24 Python