session用于保存登录会话状态:
koa使用
koa-session
vue使用vue-session
都在npmjs上下载
在跨域的情况下(前后端域名不同),koa后端使用ctx.session保存用户名是不会保存在浏览器前端的。可能体现为每次刷新页面都会失去登录状态。
- 需要在koa后端的app.js中加入跨域请求头和允许发送Cookie,如下:
app.use(cors({
credentials:true,//默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器许可Cookie可以包含在请求中
origin: ctx => ctx.header.origin, // web前端服务器地址,注意这里不能用*
}));
- 也要在前端发送请求时添加加入cookie的代码(我使用的是axios模块,也在npmjs下载),如下:
axios({
method: 'xxx',//get/post/patch/delete/put.这里下面有说明
url: url,
data: {
xxx:xxx
},
withCredentials: true
})
说明:使用axios.xxx({…})的过程中我出现了自动改变了我访问的服务器地址的问题,比如我的服务器是localhost:3000
,前端是localhost:8080
,但是浏览器报错404说我访问的服务器地址是localhost:8080
,这时使用{method:‘xxx’}的方式可以解决这个错误,具体原因我不清楚,烦请明白的伙伴指点指点
全部设置正确之后,假如kao-session的key是koa:sess,浏览器应该有如下保存的cookie: