理解Cookie Token 的区别

Cookie 是保存在客户端(或浏览器)的
Session 是服务器上的概念

至于他们的详细的介绍网上一堆,就不细说了.

下面主要说下Cookie 和近期? 流行的Token

首先是Cookie,Cookie已经存在很长一段时间了,他主要的目的还是对应的是 在服务器端使用Session来区分不同用户. 或者说保持客户端的当前状态(例如xxx登陆了,下次再打开客户端{Browser}就不需要再次登陆了,客户端{Browser}会查找并应网站的Cookie,如果有就将请求附上此Cookie并发送.只要得到服务器的认证.则用户不需要再次登陆)

但是使用 Cookie 需要防止CORS跨域问题,想想如果B的网站读取了A网站的Cookie信息,那得多恐怖??

 

所以在浏览器发送跨域请求时, 哪怕服务器端通过了跨域请求(下方 origin设置为 *)

res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Authorization,X-UI-Request,Lang");

在浏览器发送请求时，会出现如下错误：

from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'

when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

上述错误可以说是 在 origin字段为 null 时候并且的Access-Control-Arrow-Origin为* 时，不能使用跨域的Cookie. 所以应该浏览器请求头加上origin= http://xxxxxxx
但我个人比较懒，能在本地磁盘打开就不开服务器（所以我浏览器路径为:file:///F:/project ... 而不是 http://localhost）
所以 我没有设置origin （一般设定为http://localhost ??）
我选择了另外的方式 在快捷方式后加上：--disable-web-security --user-data-dir=F:

 然后发现获取成功了但是还是没有获取到Cookie，但是服务器却在第二次请求时接收到了 Cookie？？？可能是浏览器隐藏cookies？这问题还在查询中。
找到原因了原来是axios的坑，详细见：【掉过的坑】axios获取cookie的正确姿势

 

 

而随着WebAPI 的流行（或者说前后端的分离），Cookie 这种方式不太适合当前的这种WebAPI的开发方式了，为此 增加了在登陆成功后发送Token，并且在下次操作时添加上token请求头。（也可以添加在body，作为json的一个字段，但是这样我个人觉得扩展性不好），这样通过Token验证用户的真实性及操作权限，可以更好的配合WebAPI的使用。

文章最后发现一片资料说得更完整，想更深入的可以点击下方链接了解：
彻底理解 cookie session token