解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话.
在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了.
解决办法如下:
环境:
vue 2.0
springboot 2.1.6
一、前端部分
1. 在vue引入axios的位置添加以下代码
import axios from 'axios'
axios.defaults.withCredentials = true;// 允许跨域携带cookie

二、后台部分
1. 新建一个FilterConfig类, 编写一个拦截器类
/**
* 允许跨域请求
* @author Administrator
*
*/
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.*;
@Component
public class FilterConfig implements HandlerInterceptor{ public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
throws Exception {
} public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2)
throws Exception {
} public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception { response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域
response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");//Origin, X-Requested-With, Content-Type, Accept,Access-Token
return true;
}
}

2. 在创建一个SpringMVCConfig类, 请用拦截器
/**
* 启用跨域配置
* 编写SpringMVCConfig类使用FilterConfig中的配置
* @author Administrator
*
*/
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SuppressWarnings("deprecation")
@SpringBootConfiguration
public class SpringMVCConfig extends WebMvcConfigurerAdapter{
@Autowired
private FilterConfig filterConfig; public void addInterceptors(InterceptorRegistry registry){
registry.addInterceptor(filterConfig).addPathPatterns("/**");
}
}

问题解决, 重启工程后我们再次打印每次请求的sessionID就会发现sessionID是一致的, 当然也就可以获取我们存入session的内容了.
System.out.println(request.getSession().getId());
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题的更多相关文章
- Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...
- docker-compose 部署 Vue+SpringBoot 前后端分离项目
一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...
- 云计算:Ubuntu下Vue+Springboot前后端分离项目部署(多节点)
一.机器准备 首先准备三台机器: 我是一台WINDOWS系统主机,在WINDOWS里的 VMware 中安装两台Ubuntu系统虚拟机 如果你的虚拟机只有 CentOS,可以参考这篇文章:https: ...
- vue+springboot前后端分离实现单点登录跨域问题处理
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登 ...
- 基于Vue的前后端分离项目实践
一.为什么需要前后端分离 1.1什么是前后端分离 前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...
- 《论vue在前后端分离项目中的实践之年终总结》
我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...
- 【转】python+django+vue搭建前后端分离项目
https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...
- python+django+vue搭建前后端分离项目
以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...
- .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架
框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...
随机推荐
- expect 知识与示例说明
expect 知识与示例说明 2012/04/10 chenxin 2019/07/07 update Chenxin 参考 https://www.cnblogs.com/yinghao1991/p ...
- (办公)访问其他系统接口httpClient,异步访问
访问其他系统接口httpClient,但是都是同步的,同步意味当前线程是阻塞的,只有本次请求完成后才能进行下一次请求;异步意味着所有的请求可以同时塞入缓冲区,不阻塞当前的线程; httpClient请 ...
- AcWing 32. 调整数组顺序使奇数位于偶数前面
习题地址 https://www.acwing.com/solution/acwing/content/2921/ 输入一个整数数组,实现一个函数来调整该数组中数字的顺序. 使得所有的奇数位于数组的前 ...
- jQuery的延迟对象(十一)
在前端这个领域里面,ajax请求非常常见. // 前提引入jquery $.ajax({ type: 'get', url: '/path/to/data', success: function (r ...
- vue-cil3 运行报错
warnings potentially fixable with the `--fix` option. 将一下部分:"lint": "vue-cli-service ...
- LeetCode 136:只出现一次的数字 Single Number
题目: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. Given a non-empty array of integers, every e ...
- Python之基本运算符
基本运算符 1.算符运算符 运算符 描述 例子 + 两个对象相加 a+b - 两个对象相减 a-b * 两个数相乘或返回一个被重复若干次的字符串 a*b / 两个数相除 a/b % 取模,返回除法的余 ...
- 开发常用Git/Linux/idea命令快捷键总结(持续更新)
在开发过程中,会使用越来越多的命令,或快捷键,来帮助我们提高工作效率.本文记录了我在平时积累的常用命令,分享给大家. git命令 基本命令 set LESSCHARSET=utf-8 --idea T ...
- 数据库——SQL SERVER Transact-SQL 程序设计
什么是Transact-SQL? 标准SQL不支持过程化控制, 不能完成复杂的功能.T-SQL是过程化SQL语言, 是SQL的扩展 增加了过程化语句 (变量,赋值,分支,循环...)是数据库服务器 ...
- Flink中Idle停滞流机制(源码分析)
前几天在社区群上,有人问了一个问题 既然上游最小水印会决定窗口触发,那如果我上游其中一条流突然没有了数据,我的窗口还会继续触发吗? 看到这个问题,我蒙了???? 对哈,因为我是选择上游所有流中水印最小 ...