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 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
PHP邮件专题
2006/10/09 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP xpath()函数讲解
2019/02/11 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python可以用哪些数据库
2020/06/22 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
python中四舍五入的正确打开方式
2021/01/18 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
销售代表求职自荐信
2013/10/01 职场文书
车间统计员岗位职责
2014/01/05 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
经营管理策划方案
2014/05/22 职场文书
技校毕业生自荐信
2014/06/03 职场文书
公司员工活动策划方案
2014/08/20 职场文书
中班教师个人总结
2015/02/05 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers