一个月没动的项目,今天突然需要优化一个功能,项目启动,美滋滋的 localhost:8082访问前端页面,登录成功,
访问数据页面,报未登录
一脸懵逼,一个月前好好的项目,突然就出问题了,查看下请求发现没有携带cookie
异常情况,没有携带cookie
正常访问 携带cookie
一脸懵逼的找来了搭建项目的大佬,好像也不清楚,没法自己研究吧,发现浏览器console中有这么个提示
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
大概意思就是 跨域问题了,之前没有了解过 samesite , 度娘一下 samesite = Lax,
参考http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
samesite 是chrome推出的针对cookie的新属性,有三种格式
1、Strict
最为严格,完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。
2、Lax
规则稍稍放宽,大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外
3、Chrome 计划将Lax
变为默认设置。这时,网站可以选择显式关闭SameSite
属性,将其设为None
。不过,前提是必须同时设置Secure
属性(Cookie 只能通过 HTTPS 协议发送),否则无效
根据排查,尝试了2种解决办法,以及一种复杂的未实现的解决办法
1、访问的 localhost:8082改为本机ip,和后端的访问ip一致
问题: localhost:8082 -> 192.168.1.111:6010/prod/list -> 无法正常访问
改为 : 192.168.1.111:8082 -> 192.168.1.111:6010/prod/list -> 正常访问
这种只是尝试了一下,居然可以,原理不太清楚
2、最直接的,禁用这个属性
再次测试
localhost:8082 -> 192.168.1.111:6010/prod/list -> 正常访问
3、这个就比较复杂了,没有测试
后端:
@Bean public CookieSerializer httpSessionIdResolver(){
DefaultCookieSerializer cookieSerializer = new DefaultCookieSerializer();
cookieSerializer.setCookieName("token");
cookieSerializer.setUseHttpOnlyCookie(false);
cookieSerializer.setSameSite(null);
return cookieSerializer;
}
response.setHeader("Access-Control-Allow-Credentials", "true");
前端:
xhrFields: {
withCredentials: true
}
问题解决,畅快啊
参考资料:
https://www.chromestatus.com/feature/5088147346030592
https://www.chromestatus.com/feature/5633521622188032