解决前后端分离 vue+springboot 跨域 session+cookie失效问题


Posted in Javascript onMay 13, 2019

环境:

前端 vue ip地址:192.168.1.205

后端 springboot2.0 ip地址:192.168.1.217

主要开发后端。

问题:

首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查。后续请求取出的用户都为null。

解决过程:

首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了。然后发现cookie浏览器不能自动保存,服务器响应set-cookie了

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

搜索问题,发现跨域,服务器响应的setCookie浏览器无法保存,而且就算保存了域名不同也不能携带。

第一步:

后台添加过滤器,因为前后端分离,不可能每个方法都写一遍,所以添加过滤器统一处理。

package com.test.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(urlPatterns = "/*", filterName = "CORSFilter")
public class CORSFilter implements Filter {
 @Override
 public void destroy() {
 }
 /**
  * 此过滤器只是处理跨域问题
  * @param servletRequest
  * @param servletResponse
  * @param chain
  * @throws ServletException
  * @throws IOException
  */
 @Override
 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws ServletException, IOException {
  HttpServletRequest req = (HttpServletRequest) servletRequest;
  HttpServletResponse resp = (HttpServletResponse) servletResponse;
  String origin = req.getHeader("Origin");
  if(origin == null) {
   origin = req.getHeader("Referer");
  }
  resp.setHeader("Access-Control-Allow-Origin", origin);//这里不能写*,*代表接受所有域名访问,如写*则下面一行代码无效。谨记
  resp.setHeader("Access-Control-Allow-Credentials", "true");//true代表允许携带cookie
  chain.doFilter(servletRequest,servletResponse);
 }
 @Override
 public void init(FilterConfig filterConfig) throws ServletException {
 }
}

springboot2.配置过滤器时,启动类必须加上@ServletComponentScan才会加载过滤器

@SpringBootApplication
@EnableTransactionManagement(order = 10)
@ServletComponentScan
public class Application {
 public static void main(String[] args) {
  SpringApplication.run(Application.class, args);
 }
}

然后前端配置

使用vue.resource发送请求时配置如下:
main.js中
Vue.http.options.xhr = { withCredentials: true }
使用vue.axios发送请求时配置如下:
axios.defaults.withCredentials = true;
jquery请求带上 xhrFields: {withCredentials: true}, crossDomain: true;
$.ajax({
 type: "post",
 url: "",
 xhrFields: {withCredentials: true},
 crossDomain: true,
 data: {username:$("#username").val()},
 dataType: "json",
 success: function(data){ }
});

此时问题已解决。

但我查看请求时,还是没有带cookie,太纠结于这一点了。以至于查看全部cookie时突然明白了。

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

没有带cookie。

浏览器全部cookie

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

已经有服务器的cookie了。当向服务器发送请求时,会携带cookie,证明是同一会话。

发现火狐的请求头中存在cookie,不知道为什么谷歌的请求头不显示,不明白。望解答。

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

总结

以上所述是小编给大家介绍的解决前后端分离 vue+springboot 跨域 session+cookie失效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
node.js require() 源码解读
Dec 13 Javascript
js实现图片轮播效果
Dec 19 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
轻松搞定js表单验证
Oct 13 Javascript
微信小程序入门教程
Nov 18 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 #Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
jsonp跨域获取百度联想词的方法分析
May 13 #Javascript
基于Fixed定位的框选功能的实现代码
May 13 #Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Python 使用多属性来进行排序
2019/09/01 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
若干个Java基础面试题
2015/05/19 面试题
工作人员思想汇报
2014/01/09 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
委托书范本
2014/04/02 职场文书
教师节横幅标语
2014/10/08 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
战马观后感
2015/06/08 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python