Vue使用axios引起的后台session不同操作


Posted in Javascript onAugust 14, 2020

新项目前端用的Vue全家桶,使用axios代替ajax请求后台接口,在调整注册接口的时候,发现在session里取不到验证码,排查后才知道获取验证码和注册两个请求的session不同,sessionId不一样。

现在调整一下Vue的配置,修改main.js文件,添加如下两行代码

import axios from 'axios'

axios.defaults.withCredentials=true;

修改后

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
// 默认false 会导致后台接收到的同一用户的不同请求sessionid都不同,需要改为true
axios.defaults.withCredentials=true;
 
Vue.config.productionTip = false
Vue.use(ElementUI)
  /* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

同时后台也需要配合修改,后台用的是Spring Boot,下面是修改后的结果

@Configuration
public class CorsConfig {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.setAllowCredentials(true);
    // 设置setAllowCredentials = true后就不能设置为*了,要设置具体的
    corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");
    corsConfiguration.addAllowedOrigin("http://localhost:8080");
    // 允许任何头
    corsConfiguration.addAllowedHeader("*");
    // 允许任何方法(post、get等)
    corsConfiguration.addAllowedMethod("*");
    return corsConfiguration;
  }
 
  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    // 对接口配置跨域设置
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

这是一个允许跨越请求的类

设置

corsConfiguration.setAllowCredentials(true);

设置了上行代码后,addAllowedOrigin设置成*就不允许了

corsConfiguration.addAllowedOrigin("*")

需要设置成指定的地址

corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");

corsConfiguration.addAllowedOrigin("http://localhost:8080");

这样就ok了!

补充知识:vue axios sessionID 每次请求都不同的原因,及修改方式

今天应项目需要,需要在请求当中加入sessionID的验证,但是发现每一次发送给后台的请求当中,sessionID都是不一样的,那么原因是什么呢?

查阅度娘之后,发现自己封装的axios配置文件当中,缺少了一行:

import axios from 'axios'

axios.defaults.withCredentials = true

这是axios的文档: https://www.kancloud.cn/yunye/axios/234845

// `withCredentials` 表示跨域请求时是否需要使用凭证

withCredentials: false, // 默认的

在我封装的axios请求当中,是没有 withCredentials的配置的, 如果没有配置为true,默认为false则向后台发送的请求当中不携带cookie信息,如此每一次sessionID自然会不同。

而再加入这一行配置之后,再次测试,发现出现新的的问题:

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

这个时候,就需要后台的同事帮忙了,在后台的跨域请求头配置当中,进行如下两行的配置:

response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*

而是:

Vue使用axios引起的后台session不同操作

作用是将访问接口才ip注册进去。

第二个配置是:

Access-Control-Allow-Credentials: true

若是不设置成这个,也会出错。

而这样前后都设置完毕之后,再次请求,你会发现,还是出错了,那是因为,你需要在修改一个地址

host: 'localhost', // 这里要修改为你本机的ip地址,那少年,你就成功了
 port: 8080, // 端口
 autoOpenBrowser: false,

以上这篇Vue使用axios引起的后台session不同操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JQuery触发事件例如click
Sep 11 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 #Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 #Javascript
vue设置全局访问接口API地址操作
Aug 14 #Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 #Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 #Javascript
vue调用本地摄像头实现拍照功能
Aug 14 #Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 #Javascript
You might like
将PHP作为Shell脚本语言使用
2006/10/09 PHP
Yii2中datetime类的使用
2016/12/17 PHP
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Angular路由简单学习
2016/12/26 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
使用python存储网页上的图片实例
2018/05/22 Python
python re模块的高级用法详解
2018/06/06 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
国旗下的演讲稿
2014/05/08 职场文书
施工安全标语
2014/06/07 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
深入理解go缓存库freecache的使用
2022/02/15 Golang