先说技术栈:前后端分离,前端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),把该选项勾掉之后再次尝试,终于可以了。。😂