COOKIE 跨域获取问题

最近开发我的项目时，须要用到后端设置 session，用户申请时，更具 session 设置给前端的 cookie 获取 session 的值，因为我的项目采纳的是前端后端拆散（前后端不在一个域上），故呈现了如题所示问题：

性能介绍

1. 用户在登陆时后端返回验证码图片，同时生成 session，存储验证码的值，
2. 用户的登陆时提交验证码的值，如果雷同通过，不雷同从新获取验证码

代码

// 获取验证码
  getCaptcha() {const { ctx} = this;
    const captcha = svgCaptcha.createMathExpr({
      inverse: false, // 翻转色彩
      fontSize: 50, // 字体大小
      noise: 1, // 噪声线条数
      width: 110, // 宽度
      height: 38, // 高度
      color: true, // 验证码的字符是否有色彩，默认没有，如果设定了背景，则默认有
    });
    ctx.session.maxAge = 1000 * 60; // 1 分钟
    ctx.session.renew = false; // 设置在间断拜访的时候不刷新剩余时间
    ctx.session.verifyCode = captcha.text; // 设置 session
    this.success({code: captcha.data,});
  }

 // login
  async login() {const { ctx} = this;
    const {account, password, code} = ctx.request.body;
    const verifyCode = ctx.session.verifyCode;
    console.log(verifyCode);

    if (code !== verifyCode) {this.error('验证码谬误', 444);
      return;
    }
    ...
  }

问题来了

所有拜访失常，然而

1. 用户登录时，后盾取不到 session，值为 undefined
2. 前端 cookie 里也无相应的值

解决

通过查阅，起因是 cookie 跨域，不能拜访的起因，须要对代码进行相干设置：

参考：https://blog.csdn.net/weixin_…

前端（vue axios）：

// 进行一些全局配置
axios.defaults.baseURL = 'http://127.0.0.1:7001'; //egg 后盾的地址
axios.defaults.timeout = 5000;
axios.defaults.withCredentials = true; // 让 axios 发送申请的时候带上 cookie

设置后，拜访如下：（这种状况下，还须要后端设置）

后端（用的是阿里的 eggjs）

<span> 留神：上面有 origin 的多种设置形式，特地是多个跨域，值得珍藏哦 </span>

config.cors = {
    // origin: '*',
    // origin: 'http://127.0.0.1:9384',
    origin(ctx) {
      // return "*"; // 容许来自所有域名申请
      // return ctx.header.origin;// 当 * 无奈应用时，应用这句, 同样容许所有跨域
      // return 'http://localhost:8080'; // 单个跨域申请
      // 容许多个跨域
      const allowCors = [
        'http://localhost:9384',
        'http://127.0.0.1:9384',
        'http://172.16.92.62:9384',
      ];
      return allowCors.indexOf(ctx.header.origin) > -1 ? ctx.header.origin : '';
    },
    credentials: true, // 前台能够携带 cookies 无此选项的话，还是下面的跨域
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
  };

设置后

能够失常获取到后盾设置的 cookie 了（session 会主动向前端设置一个 cookei）

至此根本登陆能够失常进行了

然而

如果你用的是 google 浏览器，或者内核是 chrome 的浏览器，如果版本高于 80

后盾获取 session，还是 undefined

起因

上图能够看到，这种 cookie 没有胜利

从 Chrome 51 开始，浏览器的 Cookie 新减少了一个 SameSite 属性，用来避免 CSRF 攻打和用户追踪。
该设置以后默认是敞开的，但在 Chrome 80 之后，该性能默认已开启

参考 https://www.ruanyifeng.com/bl…

解决办法：

用户:

1. 关上 Chrome 设置，将 chrome://flags/#same-site-by-default-cookies 禁用，而后重启浏览器。

1. 应用低版本浏览器（chrome 小于 80 版本）

开发者:

1. 计划 1. 将 SameSite 属性值改为 None, 同时 将secure 属性设置为 true。且须要将后端服务域名必须应用https 协定拜访。
2. 因为设置 SameSite = None，有SCRF 危险，所以，最佳计划是用 token 代替 Cookie 形式作验证。

本例中的解决方案举荐应用 Redis 解决