Cookie跨域限制

一，什么叫Cookie跨域限制

浏览器具有同源策略的安全机制，是用来防止恶意网站窃取你的登录信息。判断同源协议，域名，端口三要素必须相同，有一个不一样就是跨域。

例如：某网站前端页面地址为：http://127.0.0.1:3000

后端接口地址为：http://127.0.0.1:8080

协议，域名一样，但是端口号不同，这就属于跨域场景，大多数前后端分离项目都是这种情况。

二，cookie特性：浏览器自动携带，但是会受同源管控

1，Cookie 是浏览器专属存储，绑定域名；

2，当你访问A域名页面，页面再发起请求调用B域名接口：

如果同源：浏览器自动在请求头中带上当前域名的所有Cookie；

如果跨域：浏览器默认禁止自动携带Cookie,不会把前端域名的Cookie传给后端服务（Cookie跨域限制）（Cookie要么自己设置，要么创建Session的时候自动返回一个Cookie）

三，结合Session就可以看出来跨域限制的局限性

传统的登录流程，Session机制完全依赖Cookie；

1，用户登录，后端生成SessionID，绑定域名的Cookie存储在浏览器本地。

2，后续如果是同域请求，浏览器自动携带Cookie，后端拿到SessionID，查到你的登录会话；

3，一旦跨域，浏览器拒接携带Cookie，导致请求中没有没有SessionID，后端识别不了用户，判定未登录。

四，JWT为什么没有这方面限制?

Cookie是浏览器自动管控，自动携带，被同源策略限制。而JWT不存cookie,主流存在LocalStorage/sessionStorage,由前段代码写请求头，把JWT字符串添加进去，前端代码每次发送请求手动塞进Header，不管是否跨域，这段字符串都会被送到后端，浏览器不会拦截。

五，浏览器本地存储分类

1，Cookie

2，LocalStorage

3，sessionStorage

区别：

Cookie 特殊规则（自带跨域缺陷）

1. 绑定域名、端口 A 网站（3000 端口）写的 Cookie，默认只有访问 3000 同域接口时，浏览器才会自动带上；跨域接口浏览器直接不自动携带。
2. 浏览器自动传输 不用你写 JS 代码追加，每次请求浏览器自动把对应域名 Cookie 塞进请求头。同源策略为了安全，直接限制跨域自动发送 Cookie。
3. 容量小，每次请求都会跟着发，增加流量开销。

localStorage（存 JWT 主流方案）

1. 仅页面 JS 读写，不会自动随请求发送，存在浏览器，但浏览器不会主动把 localStorage 里的数据发给后端接口。
2. 无域名传输绑定限制前端 JS 想读就读，手动把里面的 JWT 放到自定义请求头，无论请求哪个跨域后端地址，数据都会完整传过去，浏览器不会拦截。
3. 容量更大，不会每次请求自动携带

SessionStorage与LocalStorage类似

二者都不受cookie跨域限制，

区别：

LocalStorage：永久保存，关闭浏览器，重启电脑数据还在，除非手动清空

SessionStorage：仅当前标签页有效，关闭当前网页标签，数据直接清空。

​​​​​​​