【记录篇】后端给前端设置cookie失效原因

近期在学着用react做一个点餐系统的小demo，使用koa搭建后台服务，客户端登录时向后台发送post请求，后台接收到请求后查询数据库，验证成功后端会给前端设置cookie以保持maxAge有效期内成功登录状态
但，明明登录成功，前端却不能保持登录状态（一刷新页面登录状态就消失了），那么前端并没有获取到该cookie，检查后台发现该cookie是确实设置过的…

客户端请求登录代码：

// 这里直接请求网站域名对应的ip地址
this.$axios.get('http://39.98.232.254:3002/guestLogin',{withCredentials: true})
            .then(...)

服务端设置cookie：

ctx.cookies.set('nickname', new Buffer.from(nickname).toString('base64'), {
                    domain: '.lengendliu.cn', // cookie作用区域,所在域名
                    path: '/', // 前端哪些路由可以使用
                    httpOnly: false, // 前端是否可见
                    maxAge: 1000 * 60 * 60, // 过期时间
                    overwrite: false,
                    //secure:false
                })

后台返回的是登录成功的状态码，检查httpOnly为false无误，那么前端不应该获取不到cookie啊…

查阅资料后才发现问题出在domain设置，-_-·
domain可以理解为cookie可作用的域名范围，比如domain设置为 .xyz.com(注意这里必须以 . 开头)，那么该域名下的所有子域名（如a.xyz.com , b.xyz.com）都为该cookie的有效作用域名。
这里问题就出在后端设置的domain域和前端请求的域名不一致，其实就是跨域：虽然ip地址对应的确实是domain设置的域名，但浏览器出于安全方面的策略，明确规定ip地址和相对应的域名之间的请求亦属于跨域。
所以这里需要修改前端请求url为：

this.$axios.get('http://www.lengendliu.cn:3002/guestLogin',{withCredentials: true})

重启项目

果然可以正常获取到后端设置的cookie了