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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
解决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
ftp类(myftp.php)
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
深入理解移动前端开发之viewport
2018/10/19 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python中xrange和range的区别
2014/05/13 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
医学生实习自我鉴定
2013/09/27 职场文书
信访工作者先进事迹
2014/01/17 职场文书
求职个人评价范文
2014/04/09 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
志愿者宣传口号
2014/06/17 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
解约证明模板
2015/06/19 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
python面向对象版学生信息管理系统
2021/06/24 Python