[前端回顾] 详解Cookie
什么是 Cookies
全称 HTTP Cookie,又称 Web cookie 或 Browser cookie,是由服务器发送至用户浏览器客户端并存储的一些信息片段数据。它通常用于解决在无状态 HTTP 协议下的状态保持问题。Web 发展至今,Cookie 仍然发挥着重要作用,尚未被完全替代。
Cookie 构成
Cookie 包含了Name
,Value
,Domain
,Path
,Expires/Max-Age
,Secure
,HttpOnly
这些属性。
-
Name: 一个唯一确定 Cookie 的名称,区分大小写,在一些后台开发框架如 ASP.NET 通过封装淡化了 Cookie 名的大小写之分。
-
Value: Cookie 的值,必须经过 URL 编码
-
Domain: Cookie 生效于的域,如果未被设置,则默认是设置 Cookie 时所在的域
-
Path: 指定域中的那个路径,应该向服务器发送 Cookie,/ 表示没有限制
-
Expires/Max-Age: Expires/Max-Age 是设置 Cookie 过期时间的两种方式,前者直接指定 GMT 格式日期,后者指定从当前时间往后生效的秒数,最终设置到客户端,均表现为过期时间 Expires
-
HttpOnly: Cookie 仅用于 HTTP 传输,不能由 JS 等脚本获取和操作
-
Secure: Cookie 仅能通过 SSL/TSL 安全连接发送
注意:Cookie 也有一个唯一性要求,相当于Name
,Domain
,Path
三者构成了一个唯一性索引。
Cookie 设置与传输
服务器端通过Set-Cookie
头部字段告知浏览器客户端如何设置 Cookie,例如:
Set-Cookie: foo=bar; Expires=Tue, 03 Jan 2018 22:09:38 GMT; Path=/; Domain=.fedepot.com; HttpOnly
Set-Cookie
头部字段可以设置多次。
客户端在发送 Cookie 时,会将所需要发送的 Cookie 列表以name=value
的形式组合,;
分隔,在请求头部的Cookie
字段将 Cookie 写入并发送给目标服务器。
Cookie 与跨域
在有跨域请求的情况,请求什么域名,则发送相匹配域名的 Cookie,不会发送全部 Cookie。
在CORS
中,前置Options
请求头必须包含了Access-Control-Allow-Credentials:true
,且Access-Control-Allow-Origin
的值为具体 Orgin 而非*
通配时,才可以发送 Cookie。
下面通过一次 XHR 发送 Cookie:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
参考
- 原文作者:Touchumind
- 原文链接:https://blog.fedepot.com/post/cookie/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。