【JS】跨域问题读写cookie的解决办法

场景描述：

跨域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;
    };