跨域cookie携带问题总结

背景

我们知道很多场景,都需要前端请求带上cookie,例如用户鉴权、登陆校验等。而有些场景下,我们会发现请求不会带上cookie,这是为什么呢?

概念

cookie是种在域名下的信息。只有请求同域且同站的请求,才能携带cookie。

首先,我们需要了解,跨站(cross-site)和跨域(cross-origin)是两个概念:

  1. 同站指:只要两个 URL 的 eTLD+1 相同即可(有效顶级域名+二级域名),不需要考虑协议和端口

  2. 同源指:协议/主机名/端口完全一致

浏览器的默认配置same-site:Lax,意味着部分cookie允许跨站请求携带,需同时满足以下条件:

  1. 顶级导航链接,如a标签(iframe不行)

  2. GET、HEAD请求(POST不行)

Secure: 只有HTTPS请求才会带cookie

HttpOnly: 客户端无法读取和修改cookie。

跨域能否携带cookie?

理论上,我们解决跨域问题无非是两种方式:

  1. 直接请求跨域域名,前端设置withCredentials,然后后端设置CORS请求头来允许跨域。

  2. 通过后端代理的方式,先访问同域名的后端服务,然后在后端转发到其他服务。

第一种方法,在same-site:Lax的情况下,是无法携带跨站cookie的。

第二种方法,可以携带cookie。

解决方案

  1. 通过设置浏览器中的same-site: None;和HttpOnly: true,来实现跨站的cookie携带。但是这种方法基本只能解决本地调试问题,线上不可能通过这种方法。

  2. 通过代理的方式携带cookie。推荐使用这种方案。

相关推荐
Ruiery1 小时前
Linux 6.6内核 CPU 启动深度解析(二):AP 拉起 — BSP 如何用 INIT-SIPI 唤醒其余 CPU
linux·运维·服务器
anew___2 小时前
《从零手写操作系统 (20):ELF加载器——让OS读懂现代编译器》
java·服务器·前端
ss2732 小时前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
对空六课2 小时前
动态按钮ID变化时的稳定埋点标识设计
前端·数据分析
福兮说2 小时前
URL 编码的七个坑:c++ 传到后端变空格、%25 套娃、截断 emoji 直接报错
开发语言·前端·javascript·node.js·url
吴声子夜歌2 小时前
Nginx应用与运维——Nginx Web服务应用实战(Python网站的搭建)
运维·前端·nginx
网络小江2 小时前
上网第三十五课:第五周复盘——IP 与 DNS 快问快答
网络协议
小的时候可菜了2 小时前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
liangshanbo12152 小时前
Webpack vs Vite 底层原理高频追问的问题
前端·webpack·node.js
可乐鸡翅yeah_2 小时前
hls.js 配置 loadStartPosition,点播起始播放位置踩坑
开发语言·javascript·网络协议·ecmascript·m3u8在线