解决前后端分离 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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
js实现左右轮播图
Jan 09 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
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
python复制文件代码实现
2013/12/23 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
销售文员岗位职责
2013/11/29 职场文书
明星邀请函
2015/02/02 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
java实现面板之间切换功能
2022/06/10 Java/Android