什么是 Cookies

全称 HTTP Cookie,又称 Web cookie 或 Browser cookie,是由服务器发送至用户浏览器客户端并存储的一些信息片段数据。它通常用于解决在无状态 HTTP 协议下的状态保持问题。Web 发展至今,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三者构成了一个唯一性索引。

服务器端通过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。

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);

参考

MDN·Cookie MDN·Access-Ctonrol-Allow-Credentials