场景描述:
跨域Cookie共享:访问A站点时已经登录从而保存姓名、头像等基本信息,这时访问该公司的B站点时就自然而然的能显示出这些基本信息,也就是实现信息共享(在银联体系中A银行办理的卡也能在B银行能取出钱来,也就是实现余额“共享”)
交互机制:
1、浏览器(客户端)发送一个请求到服务器
2、服务器响应。并在HttpResponse里增加一个响应头:Set-Cookie
3、浏览器保存此cookie在本地,然后以后每次请求都带着它,且请求头为:Cookie
4、服务器收到请求便可读取到此Cookie,做相应逻辑后给出响应
跨域的设置 => 配置domain
domain:创建此cookie的服务器主机名(or域名),服务端设置。但是不能将其设置为服务器所属域之外的域 (若这都允许的话,你把Cookie的域都设置为baidu.com,那百度每次请求岂不要“累死”)端口和域无关,也就是说Cookie的域是不包括端口的。
domian 的传入需要注意格式 => .prismjs.com 要注意需要配置.
设置cookie 👇
// 设置cookie
const setCookie = (
name: string, // 名字
value: string, // 值
day: number, // 过期天数
path: string, // 目录
domain: string // 主机名
) => {
day = day || 30;
path = path || "/";
var str = name + "=" + value + "; ";
if (day)
str +=
"expires=" +
new Date(Date.now() + day * 24 * 3600 * 1000).toUTCString() +
"; ";
if (path) str += "path=" + path + "; ";
if (domain) str += "domain=" + domain;
console.log(str)
document.cookie = str;
// console.log("getCookie",getCookie("hall_login"))
};
获取cookie 👇
// 获取cookie
const getCookie = (name: string) => {
var arr = document.cookie.match(
new RegExp("(^| )" + name + "=([^;]*)(;|$)")
);
if (arr != null) return unescape(arr[2]);
return null;
};