2018年的第一篇博客，新的开始，新的起点
前几天在写一个利用cookie存储token的登陆demo时遇到了跨域丢失token的问题，在这里分享一下解决的方法。
案例分析
- 前端使用了vue-reource的$http进行请求后台接口
this.$http({
url: "http://120.24.5.178:8100/user/login",
method: "POST",
body: JSON.stringify({
username: this.ruleForm.username,
password: this.ruleForm.password
}),
headers: {
"Content-Type": "application/json"
}
})
登陆完成后，服务端监控发现无法拿到cookie，下面看几张前端控制台监控的图
-
无法拿到cookie时的监控图
后台cors代码
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization");
chain.doFilter(req, res);
}
- 后台获取cookie的代码
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie cookie : cookies) {
if ("ticket".equals(cookie.getName())) {
String value = null;
if (!StringUtils.isEmpty(cookie.getValue())) {
value = DigestUtil.Decrypt(cookie.getValue());
}
User login = userService.findByTicket(value);
request.getSession().setAttribute("user", login);
log.info("ticket: " + value);
log.info("user: " + login);
}
}
}
因为request中没有cookies，所以后台获取为null
经过上网查资料修改后的监控图片
- 我们可以发现在request中多了cookie这个字段，并且在cookies中有了ticket，后台可以通过request.getCookies()进行获取了
解决方法
最后定位到了这是一个跨域问题，在跨域时cookie被丢弃。
前端：请求时增加withCredentials: true
-
后端：
- 直接使用*来匹配所有域名只能适用于无需使用cookie的场景
- 可以将origin的*替换为允许请求的正则表达式
- 可以加入一个list列表，代表请求白名单
List<String> allowedOrigins = Arrays.asList("http://localhost:8080", "http://localhost:8100", "http://login.stalary.com"); response.setHeader("Access-Control-Allow-Origin", allowedOrigins.contains(origin) ? origin : "");- 也可以直接拿到前端的第一次options请求的header来进行跨域处理
String origin = request.getHeader("Origin"); response.setHeader("Access-Control-Allow-Origin", origin);
本次简单的跨域丢失cookie的处理就介绍到这里了，如有问题可以私信博主qq
登陆demo地址
登陆demo源码地址
登陆demo-swagger接口地址
服务器是学生机，访问较慢，请见谅。
