【跨域】一篇文章彻底解决跨域设置cookie问题！
一篇文章彻底解决跨域设置cookie问题！
大家好我是雪人~~⛄
之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用。
是因为谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。
接下来带大家解决该问题。
原理讲解
- 我们可以看到Cookie有以下属性
Cookie属性
名称：Cookie的name。
值：Cookie的value。
Domain： Cookie的域。如果设成xxx.com(一级域名)，那么子域名x.xxx.com(二级域名)，都可以使用xxx.com的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发送请求时便会携带Cookie
axios.defaults.withCredentials = true
后端设置
- 这里以Django为例
- Django跨域问题请参考另一篇文章：【Django跨域】一篇文章彻底解决Django跨域问题
# 我们需要修改 seeting.py 修改项目设置
# 记得先设置允许访问的IP
ALLOWED_HOSTS = ['*']# 就像我们上面所说的一样有两种解决方案# 方案一
# 将session属性设置为 secure
SESSION_COOKIE_SECURE = True
# 设置cookie的samesite属性为None
SESSION_COOKIE_SAMESITE = 'None'
# 且将协议升级为https# 方案二
# 前后端部署在同一台服务器即可# 记得先解决ajax的跨域问题
# 加入以下代码即可
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')
是不是非常简单呢，不同的前后端框架按照原理解决即可。
如果对你有帮助的话请给我点个赞吧
【跨域】一篇文章彻底解决跨域设置cookie问题！相关推荐
- android webview 设置cookie时间,解决Android webview设置cookie和cookie丢失的问题
Android页面嵌套了一个h5,H5页面内部有用户登陆页面,发现h5页面的登陆功能无法使用,一直登陆失败.和web那边商量一会,发现js写入的cookie丢失了.所有需要Android这边在重写写入 ...
- 迁移学习与跨域推荐，以及解决跨域推荐的方法
本文主要是详细介绍一下跨域推荐,包含但不局限于以下几个部分: 迁移学习 跨域推荐 跨域推荐可以怎么做 冷启动的其他一些方法 可以参考的论文有哪些 1. 迁移学习 以下内容参考[推荐系统中的多任务学习- ...
- 跨域理解及服务器端解决跨域问题
1.跨域请求,就是这个服务器去拿另一个服务器的资源,另一个服务器的域名肯定和当前的服务器域名不一样嘛. 浏览器默认是不允许跨域请求的,是浏览器对JavaScript施加的安全限制.是浏览器对JavaS ...
- 26、vue前端出现跨域问题，如何解决跨域？
问题: 因为浏览器的同源策略的限制问题(协议.主机.端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题 3种解决方法: 1.cors跨域(配置服务器) ...
- 前端跨域的理解和解决跨域的方案详解（全）
作为前端开发,我们遇到最多的应该就是跨域问题,对于萌新来说,跨域就是一道墙,不知所措,其实只要理解了跨域的含义和原理,解决它是不难的,今天给大家介绍下什么是跨域和跨域的解决方案! 什么是跨域? 跨域是 ...
- java跨系统和跨域_java web服务解决跨域问题
问题1:浏览器页面跨域请求报错 相信很多程序员都遇到过跨域的问题,如何解决一直是一件很头疼的事情,我就描述下我遇到的问题,及解决办法.什么是跨域,请自行脑补. 需要添加maven依赖,在web.xml ...
- 什么是跨域，以及如何解决跨域问题？
跨域是相对于同源策略而言的. 同源策略是一种约定,它是浏览器最核心也最基本的安全功能 所谓同源是指: 协议,域名,端口都相同,就是同源, 否则就是跨域 同源策略带来的影响 在同源策略下, 浏览器只允许 ...
- Win10、Win7系统，电脑蓝屏，什么原因怎么解决？一篇文章彻底解决！
Win10.Win7系统电脑蓝屏?什么原因?怎么办?如何解决?带着这些问题小编一一介绍下. Win10.Win7系统,电脑蓝屏怎么解决,电脑蓝屏什么原因标题 随着使用电脑的时间增长,我们的电脑逐步出现 ...
- proxy跨域不生效_前端开发：深入使用proxy代理解决跨域问题
在前端领域里面,跨域指的是浏览器允许向服务器发送跨域请求,进而克服Ajax只能同源使用的局限性限制.同源策略是一种约定,而且是浏览器中最基本也是最核心的安全功能,若缺少了该策略,浏览器非常容易被*** ...
最新文章
- VisualSVN安装配置与使用
- 有一部分文章设置了私密，论文完成后会公开~
- [android] listview入门
- Docker的部署-包括网关服务(Ocelot)+认证服务(IdentityServer4)+应用服务
- 高龄申请海外计算机科学博士,【原创】牛津在读小博谈谈在海外攻读生命科学专业的一些心得...
- python3 random模块操作
- ct上的img表示什么_明明胸部CT上已经写了肺癌，为什么还要做那么多花钱又痛苦的检查...
- MFC控件使用总结——CListCtrl
- 12. javacript高级程序设计-DOM2和DOM3
- 一个asp.net聊天是源码
- ies4linux 本地安装,Linux下离线安装ies4linux
- led灯光衰怎么解决_如何解决LED光衰的问题
- 个人wiki搭建资料整理
- （18）python字符串的使用
- IPCam的启动过程和工作流程
- 扩展UbuntuTouch根目录，解决安装空间不足的问题
- l那是计算机房吗,机房设计常用计算公式
- Linux安全之PHP木马查杀与防范
- 【WAF剖析】——sql注入之bypass深度剖析
- JavaMail API 1.4.7邮件发送
热门文章