Node学习06:express框架与vue结合使用，无法保存session内容解决方案

express框架与vue结合使用，无法保存session内容解决方案

1. 问题重现：
   使用express框架编写后端接口时，使用中间件判断用户是否登录，将登录信息保存至session中，登陆成功时该接口session能够获取到，访问其他界面时，界面遭受拦截，并且无法获取保存的session信息：
   登录接口，当登陆成功保存用户信息至session中

// 登陆
router.post('/login', async (req, res) => {
  let arr = [req.body.username, req.body.password]
  // 根据用户名和密码判断是否是正确的账号和密码
  let sqlStr = `SELECT * FROM user_info WHERE username =? AND password =? AND role_id =1`
  let result = await sqlQuery(sqlStr, arr)
  if (result.length != 0) {
    // 登陆成功
    let user = result[0];
    req.session.username = user.username
    req.session.password = user.password
    console.log(req.session);
    res.send('登陆成功')
  } else {
    res.send('登陆失败')
  }

})

控制台打印session信息能够获取

判断是否登录中间件

// 判断是否登录中间件
function isLoginMid(req, res, next) {
  if (req.session.username == undefined) {
    res.send('暂未登录')
  } else {
    // 已经登陆进入正常界面
    next()
  }
}

接口使用中间件拦截

中间件成功拦截未登录用户，但已登陆用户也被拦截在外，检查发现session值并没有保存
3. 问题原因：
由于使用vue与express框架相结合，两者的端口号不同，因此需要进行跨域处理，跨域导致session无法成功保存：
4. 解决思路：前端后端进行设置
**前端：**将axios强求的withCredentials设置为true

axios.defaults.withCredentials = true

**后端接口：**配置cors

const corsOptions = {
  origin: 'http://localhost:8080',
  credentials: true
}
//

// 解决跨域问题
app.use(require('cors')(corsOptions));

问题完美解决！！！！