Vue前端对接Express后端无法保存会话问题求助

你遇到的这个问题在跨域会话场景里很常见——后端Express的session功能单独测试没问题，但前端Vue发起请求时就是带不上会话cookie，导致每次请求都被当成新会话。我仔细看了你的代码，发现几个关键的配置疏漏，咱们一步步来修复：

1. 前端请求未携带Credentials #

Vue的$http（通常是Axios的封装）默认不会自动携带跨域cookie，你需要在请求里明确开启withCredentials：

// 修改你的beforeMount里的请求代码
beforeMount(){
  this.$http.get("http://localhost:8120/", { withCredentials: true })
    .then((res)=>{
      if(!res.body.session){
        console.log("Session not exist "+res.body.message)
        this.msg = res.body.message;
      } else{
        console.log("Session exist "+res.body.page_views)
        this.msg = res.body.page_views
      }
    },(err)=>{
      console.log(err)
    })
}

如果想一劳永逸，可以在Vue项目的入口文件（比如main.js）全局配置Axios：

import axios from 'axios'
axios.defaults.withCredentials = true
Vue.prototype.$http = axios

2. 路由层重复配置CORS导致冲突 #

你的根路由文件里额外加了router.use(cors())，这会覆盖掉你在App层面设置的CORS规则（尤其是credentials: true和指定origin的配置）。直接删掉这行代码：

// 删掉路由文件里的这一行
router.use(cors())

App层面已经配置了正确的跨域策略，路由层不需要重复配置，否则浏览器会因为CORS规则不一致而拒绝携带cookie。

3. Session配置补充关键参数 #

你的session配置可以优化几个参数，确保跨域cookie的行为符合预期：

app.use(session({
  secret: 'keyboard',
  resave: false,
  saveUninitialized: false, // 仅当会话有数据时才保存，避免空会话存储
  store: new MongoStore({ url: 'mongodb://localhost/studio' }),
  cookie: {
    secure: false, // 开发环境设为false，生产环境HTTPS下必须设为true
    httpOnly: true, // 安全设置，防止前端JS读取cookie
    sameSite: 'lax' // 跨域场景下推荐用lax，若需更宽松的跨域可设为'none'（需配合secure: true）
  }
}))

这里saveUninitialized设为false更合理，减少不必要的MongoDB存储；sameSite参数是控制跨域cookie的核心，根据你的开发环境选择合适的值。

4. 调整MongoDB连接与Session初始化的顺序 #

你当前的代码先初始化了session，再连接MongoDB，虽然connect-mongo会自动重连，但最好确保MongoDB连接成功后再初始化session，避免初始化时store连接失败：

// 先连接MongoDB
let mongoDB = 'mongodb://127.0.0.1/studio';
mongoose.connect(mongoDB, { useMongoClient: true })
  .then(() => {
    console.log('MongoDB连接成功')
    // 连接成功后再初始化session
    app.use(session({
      // 上面优化后的session配置
    }))
    // 然后挂载所有路由
    app.use('/', index);
    app.use('/users', users);
    // ... 其他路由
  })
  .catch(err => console.error('MongoDB连接失败:', err))

验证步骤 #

修改完成后，按以下步骤验证：

• 重启后端服务
• 打开浏览器控制台，查看第一次请求的Response Headers，确认存在Set-Cookie字段
• 再次发起请求，查看Request Headers，确认Cookie字段携带了对应的session ID
• 后端打印req.session，确认能正确读取到会话数据

内容的提问来源于stack exchange，提问作者Дима Философ