解决前后端分离 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+XML 操作
Sep 20 Javascript
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
javascript自执行函数
Feb 10 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
深入了解响应式React Native Echarts组件
May 29 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中for与foreach的区别分析
2011/03/09 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python下10个简单实例代码
2017/11/15 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
公司财务工作总结的自我评价
2013/11/23 职场文书
应届生个人求职信模板
2013/11/26 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
公司接待方案
2014/03/08 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
节水倡议书范文
2014/04/15 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
Python实现机器学习算法的分类
2021/06/03 Python