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

最新推荐文章于 2024-08-30 13:44:00 发布

旧梦半岛

最新推荐文章于 2024-08-30 13:44:00 发布

阅读量661

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Node 踩坑记录 Vue

本文链接：https://blog.csdn.net/qq_48459574/article/details/114403856

Vue 同时被 3 个专栏收录

36 篇文章

订阅专栏

Node

6 篇文章

订阅专栏

踩坑记录

3 篇文章

订阅专栏

本文介绍了一个常见的问题：使用Vue前端与Express后端结合时，如何解决跨域导致的Session保存失败问题。通过设置前端axios的withCredentials为true及后端配置cors，实现了Session的有效保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

问题重现：
使用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));

问题完美解决！！！！