[前端回顾] 详解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);

参考

MDN·Cookie [MDN·Access-Ctonrol-Allow-Credentials] ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials )

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章