COOKIE跨域获取问题最近在开发项目的时候,需要用到后端设置session。用户请求时,将session设置到前端cookie中,获取session值。由于项目使用的是前端后端分离(前后端不在同一个域),所以出现了如题所示的问题:功能介绍当用户登录时,后台end返回验证码图片,同时生成一个session,存储验证码的值,在用户登录时提交验证码Value,如果相同pass,不相同则重新获取验证码//获取验证码getCaptcha(){const{ctx}=this;constcaptcha=svgCaptcha.createMathExpr({inverse:false,//翻转颜色fontSize:50,//字体大小noise:1,//噪声线数width:110,//宽度height:38,//高度颜色:true,//验证码的字符是否有颜色,默认没有,如果设置了背景,则默认有});ctx.session.maxAge=1000*60;//1分钟ctx.session.renew=false;//设置连续访问不刷新剩余时间ctx.session.verifyCode=captcha.text;//设置sessionthis.success({code:captcha.data,});}//异步登录login(){const{ctx}=this;const{账号、密码、代码}=ctx.request.body;constverifyCode=ctx.session.verifyCode;控制台日志(验证码);if(code!==verifyCode){this.error('验证码错误',444);返回;}...}问题是所有访问是正常的,但是当用户登录的时候,后台获取不到session,并且value是undefined,前端cookie中也没有对应的值。经查,原因是cookie跨域,无法访问。代码需要设置:参考:https://blog.csdn.net/weixin_...前端(vueaxios)://做一些全局配置axios.defaults.baseURL='http://127.0.0.1:7001';//彩蛋后台axios的地址。defaults.timeout=5000;axios.defaults.withCredentials=true;//让axios发送带有cookie设置的请求,访问如下:(此时还需要后台设置)后台(使用阿里eggjs)注意:下面有很多设置origin的方式,特别是多个跨域,值得收藏config.cors={//origin:'*',//origin:'http://127.0.0.1:9384',origin(ctx){//return"*";//允许所有域名的请求//returnctx.header.origin;//当不能使用*时,使用这句话,Alsoallowallcross-domain//return'http://localhost:8080';//单个跨域请求//允许多个跨域constallowCors=['http://localhost:9384','http://127.0.0.1:9384','http://172.16.92.62:9384',];返回allowCors.indexOf(ctx.header.origin)>-1?ctx.header.origin:'';},credentials:true,//前台可以携带cookies。如果没有这个选项,上面的跨域allowMethods:'GET,HEAD,PUT,POST,DELETE,补丁,选项',};设置后可以正常获取到后台设置的cookie(session会自动给前端设置一个cookie)至此基本可以正常进行登录,但是如果你用的是谷歌浏览器,或者内核是forchrome浏览器,如果版本高于80,session在后台还是undefined。从上图可以看出,这种cookie是不成功的。从Chrome51开始,浏览器的cookie中新增了一个SameSite属性,以防止CSRF攻击和用户跟踪的这项设置,目前默认是禁用的,但是Chrome80之后,这个功能默认是启用的。参考https://www.ruanyifeng.com/bl...解决方法:用户:打开Chrome设置,将chrome://flags/#same-site-by-default-cookies设置为disabled,然后重启浏览器。使用低版本浏览器(chrome80以下)的开发者:解决方法1.将SameSite属性的值改为None,将secure属性设置为true。并且必须使用https协议访问后端服务域名。由于设置SameSite=None,存在SCRF风险,所以最好的方案是使用token代替cookie进行验证。本例方案推荐使用Redis来解决
