先说技术栈：前后端分离，前端Vue+WebPack，后台java+spring+tomcat，实现一个单页面应用SPA（Single Page Application）
光登录这个流程让我失眠了3天😂
登录流程很简单，用户输入用户名、密码、验证码验证登录。验证码从后台获取，并且放到Session中。
前后端分离难免遇到跨域问题，我使用的解决方案是CORS（Cross-Origin Resource Share 跨站点资源分享），spring对CORS支持的很好，用注解或过滤器，实现起来很简单。我用的是过滤器方案，在一个验证权限的过滤器中加入以下代码
responseNew.setHeader("Access-Control-Allow-Origin",requestNew.getHeader("Origin"));//设置请求来源，注意不要设置成*
responseNew.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");//允许的请求方法
responseNew.setHeader("Access-Control-Max-Age", "3600");//客户端发起预检请求的间隔时长为1小时
responseNew.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");//设置允许的请求头
解决完跨域问题之后，又遇到session不一致问题。
客户端拿到验证码时的session，和提交登录时的session不一致，导致每次验证码都无法验证通过。经过在网络上一番查找，后台增加配置
responseNew.setHeader("Access-Control-Allow-Credentials", "true");//允许请求头添加验证信息，如cookie
前端增加配置 axios.defaults.withCredentials = true;
以为大功告成了，结果被狠狠地打脸.
我开始苦苦寻找原因，可以确定的是，后台session不一致的原因是因为前端发请求时没有携带cookie。通过控制台发现，的确没有cookie。
为啥没有cookie呢，该设置的都设置了，简直是百思不得其解。
今天偶然看到一篇文章，说用chrome浏览器有cookie，用Safari没有Cookie。
没错，我用的就是Safari浏览器。当即我就下载了chrome试了一下，chrome没有问题。
这时，问题的解决方向就变的明朗了，我果断百度 Safari浏览器没有cookie，还真让我找到了。啥都不说了，直接上图吧，就是红线标注的地方：阻止跨站跟踪(Prevent Cross-Site Tracking)，把该选项勾掉之后再次尝试，终于可以了。。😂
网友评论