持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
cookie 和 token 区别
cookie
Cookie 就是访问者在访问网站后留下的一个信息片段。
Cookie 用于个性化用户的体验。可能包含用户在访问网站时的参数或输入。用户可以自定义浏览器来接受，拒绝或删除 Cookie。
Cookie 可以在服务器级别设置和修改，使用 Set-Cookie HTTP header, 或者在 JavaScript 中用 document.cookie.
ps: cookie 大小限制 4kb 以内
cookie 跨域限制
Cookies 使用不同的源定义方式。一个页面可以为本域和其父域设置 cookie，只要是父域不是公共后缀（public suffix）即可。在浏览器无法通过 JS document.cookie 获取到其他域名的 cookie 。
http 请求传递 cookie 默认有跨域限制。如果想要开启，需要客户端和服务器同时设置允许
- 客户端：使用 fetch 和 XMLHttpRequest 或者 axios 需要配置
withCredentials - 服务端：需要配置 header
Access-Control-Allow-Credentials
浏览器禁用第三方 cookie
现代浏览器都开始禁用第三方 cookie （第三方 js 设置 cookie），打击第三方广告，保护用户个人隐私。
苹果公司前不久对
Safari浏览器进行一次重大更新，这次更新完全禁用了第三方Cookie，这意味着，默认情况下，各大广告商或网站将无法对你的个人隐私进行追踪。而微软和Mozilla等也纷纷采取了措施禁用第三方Cookie，但是由于这些浏览器市场份额较小，并没有给市场带来巨大的冲击。从
2017年截至2019年底，Google Chrome官方团队前不久也宣布，为了提升用户隐私和安全，未来两年将完全禁用第三方Cookie。在完全不能写入三方
Cookie的情况下，将会对前端的数据读写方式，甚至是整个广告行业带来巨大影响。
为什么要禁用第三方 cookie？【2】
例如一个电商网站 A 引用了淘宝广告的 js，当你完成了一系列操作之后，淘宝甚至可以知道：
- 你在电商网站 A 上看过什么商品
- 你在电商网站 A 注册，是他的潜在客户
- 你在电商网站 A 上看选择特定版本的产品，例如选择某种颜色。
- ... 有种被人偷窥的感觉有没有!
cookie 和 session
cookie 用途非常广泛，最常见的就是登录。
使用 cookie 做登录校验
- 前端输入用户名密码，传给后端
- 后端验证成功，返回信息时 set-cookie
- 接下来所有接口访问，都自动带上 cookie （浏览器的默认行为， http 协议的规定）
什么是 session ？
- cookie 只存储 userId ，不去暴露用户信息
- 用户信息存储在 session 中 —— session 就是服务端的一个 hash 表
token
token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。
token 和 cookie 一样，也是一段用于客户端身份验证的字符串，随着 http 请求发送
- cookie 是 http 协议规范的，而 token 是自定义的，可以用任何方式传输（如 header body query-string 等）
- token 默认不会在浏览器存储
- token 没有跨域限制
所以，token 很适合做跨域或者第三方的身份验证。
答案
- cookie：http 规范；有跨域限制；可存储在本地；可配合 session 实现登录
- token：自定义标准；不在本地存储；无跨域限制；可用于 JWT 登录
拓展：session 和 JWT 比较，你更推荐哪个？
Session 优点
- 原理简单，易于学习
- 用户信息存储在服务端，可以快速封禁某个登录的用户 —— 有这方强需求的人，一定选择 Session
Session 的缺点
- 占用服务端内存，有硬件成本
- 多进程、多服务器时，不好同步 —— 一般使用第三方 redis 存储 ，成本高
- 跨域传递 cookie ，需要特殊配置
JWT 的优点
- 不占用服务器内存
- 多进程、多服务器，不受影响
- 不受跨域限制
JWT 的缺点
- 无法快速封禁登录的用户
总结：
如果没有“快速封禁登录用户”的需求，建议使用 JWT 方式。
总结
【1】跨源数据存储访问
