一篇文章彻底解决跨域设置cookie问题!
大家好我是雪人~~⛄
之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用。
是因为谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。
接下来带大家解决该问题。
原理讲解
我们可以看到Cookie有以下属性Cookie属性
名称:Cookie的name。
值:Cookie的value。
Domain: Cookie的域。如果设成(一级域名),那么子域名(二级域名),都可以使用的Cookie。
Path:Cookie的路径。如果设为/,则同域名全部路径均可使用该Cookie。如果设为/xxx/,则只有路径为/xxx/可以使用该Cookie。
Expires / Max-Age:Cookie的超时时间。如果值为时间,则在到达指定时间后Cookie失效。如果值为Session(会话),Cookie会同Session一起失效,当整个浏览器关闭的时候Cookie失效。
Size:Cookie的大小。
HttpOnly:值为true时,Cookie只会在Http请求头中存在,不能通过doucment.cookie(JavaScript)访问Cookie。
Secure:值为true时,只能通过https来传输Cookie。
SameSite:
值为Strict,完全禁止第三方Cookie,跨站时无法使用Cookie。值为Lax,允许在跨站时使用Get请求携带Cookie,下面有一个表格介绍Lax的Cookie使用情况。值为None,允许跨站跨域使用Cookie,前提是将Secure属性设置为true。
Priority:Cookie的优先级。值为Low/Medium/High,当Cookie数量超出时,低优先级的Cookie会被优先清除。
还需要了解两个概念:
跨站:两个域名不属于同站(域名-主机名/IP相同,协议相同)。跨域:两个域名不属于同源(域名-主机名/IP相同,端口号相同,协议相同)。
并且谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。
这下就很清楚明了了,有两种解决方案:
将Cookie的SameSite值设为None,Secure值改为true,并且升级为https,我们就可以跨域使用Cookie。将Cookie的SameSite值设为Lax/Strict,并且将前后端部署在同一台服务器下,我们就可以在同一站点使用Cookie。注意:如果是本地测试想要前后端对接我们就只能使用方案一了
两种方案需要先解决浏览器同源策略也就是跨域问题
前端设置
这里以vue的axios为例import axios from 'axios'// 只需要将axios中的全局默认属性withCredentials修改为true即可// 在axios发送请求时便会携带Cookieaxios.defaults.withCredentials = true
后端设置
这里以Django为例Django跨域问题请参考另一篇文章:【Django跨域】一篇文章彻底解决Django跨域问题# 我们需要修改 seeting.py 修改项目设置# 记得先设置允许访问的IPALLOWED_HOSTS = ['*']# 就像我们上面所说的一样有两种解决方案# 方案一# 将session属性设置为 secureSESSION_COOKIE_SECURE = True# 设置cookie的samesite属性为NoneSESSION_COOKIE_SAMESITE = 'None'# 且将协议升级为https# 方案二# 前后端部署在同一台服务器即可# 记得先解决ajax的跨域问题# 加入以下代码即可CORS_ALLOW_CREDENTIALS = TrueCORS_ALLOW_ALL_ORIGINS = TrueCORS_ALLOW_HEADERS = ('*')
是不是非常简单呢,不同的前后端框架按照原理解决即可。
如果对你有帮助的话请给我点个赞吧👍。
如果觉得《【跨域】一篇文章彻底解决跨域设置cookie问题!》对你有帮助,请点赞、收藏,并留下你的观点哦!