前后端分离项目的session问题
之前曾了解前后台分离项目都采用token解决session。
于是产生疑问:前后台分离项目都没有session吗?又不是分布式为何会产生session不能获取问题?
理清思路:前后台分离项目session不能获取到的原因是因为跨域导致请求无法携带和服务器对应的cookie,不是因为前后台分离!前后台分离项目涉及跨域,但是通过一些手段可以避免跨域如nginx反向代理代理到同一个域下,其他方式如CORS过滤跨域都可以让ajax带上cookie,既然能带上cookie那就可以在前后台使用session了吧?
背景
登录是一个网站最基础的功能。有人说它很简单,其实不然,登录逻辑很简单,但涉及知识点比较多,如:
密码加密、cookie、session、token、JWT等。
我们看一下传统的做法,前后端统一在一个服务中:
如图所示,逻辑处理和页面放在一个服务中,用户输入用户名、密码后,后台服务在session中设置登录状态,和用户的一些基本信息,
然后将响应(Response)返回到浏览器(Browser),并设置Cookie。下次用户在这个浏览器(Browser)中,再次
访问服务时,请求中会带上这个Cookie,服务端根据这个Cookie就能找到对应的session,从session中取得用户的信息,从而
维持了用户的登录状态。这种机制被称作Cookie-Session机制。
近几年,随着前后端分离的流行,我们的项目结构也发生了变化,如下图:
我们访问一个网站时,先去请求静态服务,拿到页面后,再异步去后台请求数据,最后渲染成我们看到的带有数据的网站。在这种结构下,
我们的登录状态怎么维持呢?上面的Cookie-Session机制还适不适用?
这里又分两种情况,服务A和服务B在同一域下,服务A和服务B在不同域下。在详细介绍之前,我们先普及一下浏览器的同源策略。
同源策略
同源策略是浏览器保证安全的基础,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页同源。
所谓同源是指:
- 协议相同
- 域名相同
- 端口相同
例如:http://www.a.com/login,协议是http
,域名是www.a.com
,端口是80
。只要这3个相同,我们就可以在请求(Request)时带上Cookie,
在响应(Response)时设置Cookie。
同域下的前后端分离
我们了解了浏览器的同源策略,接下来就看一看同域下的前后端分离,首先看服务端能不能设置Cookie,具体代码如下:
后端代码:
@RequestMapping("setCookie")
public String setCookie(HttpServletResponse response){Cookie cookie = new Cookie("test","same");cookie.setPath("/");response.addCookie(cookie);return "success";
}
我们设置Cookie的path为根目录"/",以便在该域的所有路径下都能看到这个Cookie。
前端代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script>$(function () {$.ajax({url : "/test/setCookie",method: "get",success : function (json) {console.log(json);}});})</script>
</head>
<body>aaa
</body>
</html>
我们在浏览器访问http://www.a.com:8888/index.html,访问前先设置hosts,将www.a.com指向我们本机。访问结果如图所示:
我们可以看到服务器成功设置了Cookie。然后我们再看看同域下,异步请求能不能带上Cookie,代码如下:
后端代码:
@RequestMapping("getCookie")
public String getCookie(HttpServletRequest request,HttpServletResponse response){Cookie[] cookies = request.getCookies();if (cookies != null && cookies.length >0) {for (Cookie cookie : cookies) {System.out.println("name:" + cookie.getName() + "-----value:" + cookie.getValue());}}return "success";
}
前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>user</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script>$(function () {$.ajax({url : "http://www.b.com:8888/test/getCookie",method: "get",success : function (json) {console.log(json);}});})</script>
</head>
<body></body>
</html>
访问结果如图所示:
再看看后台打印的日志:
name:test-----value:same
同域下,异步请求时,Cookie也能带到服务端。
所以,我们在做前后端分离时,前端和后端部署在同一域下,满足浏览器的同源策略,登录不需要做特殊的处理。
不同域下的前后端分离
不同域下,我们的响应(Response)能不能设置Cookie呢?请求时能不能带上Cookie呢?我们实验结果如下,这里就不给大家贴代码了。
由于我们在a.com域下的页面跨域访问b.com的服务,b.com的服务不能设置Cookie。
如果b.com域下有Cookie,我们在a.com域下的页面跨域访问b.com的服务,能不能把b.com的Cookie带上吗?答案是也带不上。那么我们怎么解决
跨域问题呢?
JSONP解决跨域
JSONP的原理我们可以在维基百科上查看,上面写的很清楚,我们不做过多的介绍。我们改造接口,
在每个接口上增加callback参数:
@RequestMapping("setCookie")
public String setCookie(HttpServletResponse response,String callback){Cookie cookie = new Cookie("test","same");cookie.setPath("/");response.addCookie(cookie);if (StringUtils.isNotBlank(callback)){return callback+"('success')";}return "success";
}@RequestMapping("getCookie")
public String getCookie(HttpServletRequest request,HttpServletResponse response,String callback){Cookie[] cookies = request.getCookies();if (cookies != null && cookies.length >0) {for (Cookie cookie : cookies) {System.out.println("name:" + cookie.getName() + "-----value:" + cookie.getValue());}}if (StringUtils.isNotBlank(callback)){return callback+"('success')";}return "success";
}
如果callback参数不为空,将返回js函数。前端改造如下:
设置Cookie页面改造如下:
<script>$(function () {$.ajax({url : "http://www.b.com:8888/test/setCookie?callback=?",method: "get",dataType : 'jsonp',success : function (json) {console.log(json);}});})
</script>
请求Cookie时改造如下:
<script>$(function () {$.ajax({url : "http://www.b.com:8888/test/getCookie?callback=?",method: "get",dataType : 'jsonp',success : function (json) {console.log(json);}});})
</script>
所有的请求都加了callback参数,请求的结果如下:
很神奇吧!我们设置了b.com域下的Cookie。 如果想知道为什么?还是看一看JSONP的原理吧。我们再访问第二个页面,看看Cookie能不能
传到服务。后台打印日志为:
name:test-----value:same
好了,不同域下的前后端分离,可以通过JSONP跨域,从而保持登录状态。 但是,jsonp本身没有跨域安全规范,一般都是后端进行安全限制,
处理不当很容易造成安全问题。
CORS解决跨域
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。
浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
如果想要详细理解原理,请参考维基百科
CORS请求默认不发送Cookie和HTTP认证信息。若要发送Cookie,浏览器和服务端都要做设置,咱们要解决的是跨域后的登录问题,所以要允许跨域发送
Cookie。
后端要设置允许跨域请求的域和允许设置和接受Cookie。
@RequestMapping("setCookie")
@CrossOrigin(origins="http://www.a.com:8888",allowCredentials = "true")
public String setCookie(HttpServletResponse response){Cookie cookie = new Cookie("test","same");cookie.setPath("/");response.addCookie(cookie);return "success";
}@RequestMapping("getCookie")
@CrossOrigin(origins="http://www.a.com:8888",allowCredentials = "true")
public String getCookie(HttpServletRequest request,HttpServletResponse response){Cookie[] cookies = request.getCookies();if (cookies != null && cookies.length >0) {for (Cookie cookie : cookies) {System.out.println("name:" + cookie.getName() + "-----value:" + cookie.getValue());}}return "success";
}
我们通过@CrossOrigin
注解允许跨域,origins
设置了允许跨域请求的域,allowCredentials
允许设置和接受Cookie。
前端要设置允许发送和接受Cookie。
<script>$(function () {$.ajax({url : "http://www.b.com:8888/test/setCookie",method: "get",success : function (json) {console.log(json);},xhrFields: {withCredentials: true}});})
</script><script>$(function () {$.ajax({url : "http://www.b.com:8888/test/getCookie",method: "get",success : function (json) {console.log(json);},xhrFields: {withCredentials: true}});})
</script>
我们访问页面看一下效果。
没有Cookie吗?别急,我们再从浏览器的设置里看一下。
有Cookie了,我们再看看访问能不能带上Cookie,后台打印结果如下:
name:test-----value:same
我们使用CORS,也解决了跨域。
总结
前后端分离,基于Cookie-Session机制的登录总结如下
- 前后端同域——与普通登录没有区别
- 前后端不同域
- JSONP方式实现
- CORS方式实现
前后端分离项目的session问题相关推荐
- Session(数据)共享的前后端分离Shiro实战
1,前言 本文期望描述如何使用Shiro构建基本的安全登录和权限验证.本文实战场景有如下特殊需求:1,在集群和分布式环境实现session共享:2,前端只使用HTML/CSS/JS.因此无法直接使用S ...
- 前后端分离状态保持问题之JWT
问题原因 在传统的项目中我们利用,session+cookie来保持用户的登录状态,但这在前后端分离项⽬目中出现了问题;sessionid是使用cookie存储在客户端的,而cookie遵守同源策略, ...
- 视频教程-Angular+Django前后端分离实战项目开发教程-AngularJS
Angular+Django前后端分离实战项目开发教程 胜蓝博创(韬略课堂)创始人,IT培训讲师,先后在蓝港在线,热酷,乐元素等大型游戏公司任职,参与过多款大型网游.手游的设计和开发,精通页游.手游前 ...
- 系统架构:Web应用架构的新趋势 前后端分离的想法
最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前的b/s架构,其实b/s架构就是web应用开发,对于这样的架构我们现 ...
- java会员卡的绑定和解绑_前后端分离项目 — SpringSocial 绑定与解绑社交账号如微信、QQ...
1.准备工作 申请QQ.微信相关AppId和AppSecret,这些大家自己到QQ互联和微信开发平台 去申请吧 还有java后台要引入相关的jar包,如下: org.springframework.s ...
- 前后端分离前端部署方案是什么?
这段时间,粉丝朋友会经常问到一个问题,即:前后端分离如何部署?前端部署方案是什么?虽然我们回复了很多次,但是依然有不少朋友有疑问.今天,小编就给大家整理出来,如果对这个问题感兴趣,就可以收藏起来随时查 ...
- vue前后分离session实现_vue2 前后端分离项目ajax跨域session问题解决
最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. v ...
- 前后端分离后 前端获得session数据_机器学习模型部署--打通前后端任督二脉
## 前言 ### 学历与定位 近日在某论坛,有网友提问道:搞机器学习是不是要博士或是硕士学历,是不是要求很高,顶会论文?本科生或者更低学历的,是不是就没有机会了?从最近公司的招聘来看,算法工程师的 ...
- Spring Boot前后端分离项目Session问题解决
Spring Boot前后端分离项目Session问题解决 参考文章: (1)Spring Boot前后端分离项目Session问题解决 (2)https://www.cnblogs.com/sooo ...
- 阿里云视频上传视频获取进度条问题(使用session方案,获取进度一直为0的解决方案)补充:前后端分离项目中获取进度解决方案
1.场景描述: 之前用阿里云上传视频,前端反应上传视频经常出现获取视频url失败问题.但是接口我测过很多遍都是没有问题的.后台这边提供了一个视频上传的接口返回一个videoId,还提供了一个根据vid ...
最新文章
- vue 打印 canvas 显示空白
- 【mybatis基础】mybatis开发dao两种方法
- 零基础可以学python吗-初学者必知:零基础学习Python真的能学会吗?
- java 文件 递归_JAVA实现遍历文件夹下的所有文件(递归调用和非递归调用)
- 使用Spring Data R2DBC进行异步RDBMS访问
- PHP_CodeIgniter _remap重新定义方法
- 【BZOJ3956】Count,单调栈+ST表维护区间最大值
- @Target({ElementType.METHOD, ElementType.TYPE})
- Hadoop之MapReduce理论篇01
- [Redis] redis-cli 命令总结
- 数组前半部分和后半部分有序的全排序
- matlab mpopt,matpower安装到MATLAB下遇到的问题
- 软件测试---------兼容性 / 安装卸载 / 易用性测试点(超详细)
- 基础练习 回文数 C语言
- APM监控--(六)Dapper,大规模分布式系统的跟踪系统
- dis ospf peer 输出
- 定义电竞AI,引领数据体育-火星数据
- 矩阵分解 (乘法篇)
- 微信支付报错:用户传入的appid不正确,请联系商户处理
- 学习笔记(08):区块链应用案例-区块链商业应用-供应链管理