解决前后端分离 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 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php格式化金额函数分享
2015/02/02 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python实现的栈(Stack)
2018/01/26 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python列表推导式操作解析
2019/11/26 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
大型会议接待方案
2014/03/01 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
试用期员工工作自我评价
2014/09/10 职场文书