vue+koa跨域访问session失效和跨域请求头设置

session用于保存登录会话状态:

koa使用koa-session
vue使用vue-session
都在npmjs上下载

在跨域的情况下(前后端域名不同),koa后端使用ctx.session保存用户名是不会保存在浏览器前端的。可能体现为每次刷新页面都会失去登录状态

  1. 需要在koa后端的app.js中加入跨域请求头和允许发送Cookie,如下:
app.use(cors({
  credentials:true,//默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器许可Cookie可以包含在请求中
  origin: ctx => ctx.header.origin, // web前端服务器地址,注意这里不能用*
}));
  1. 也要在前端发送请求时添加加入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:
vue+koa跨域访问session失效和跨域请求头设置_第1张图片

你可能感兴趣的:(vue+koa跨域访问session失效和跨域请求头设置)