Node.js与Vue.js前后端Session不生效及跨域配置优化求助

问题背景 #

我正在开发Node.js后端+Vue.js前端的应用，用Session实现用户认证。技术栈包括express(4.18.2)、express-session(1.17.3)、connect-mongo(3.3.8)和MongoDB(4.4.4)。配置Session后，调用/login接口正常，但调用/test接口及多次调用时每次都会生成新Session。后来通过指定固定源的CORS配置+前端withCredentials解决了问题，但现在希望不指定具体IP/域名，允许任意来源访问后端，同时保持会话稳定。

现有代码 #

后端启动代码 #

// import libs ---
import config from 'config'
import bodyParser from 'body-parser'
import { v4 as uuidv4 } from 'uuid'
import routes from './routes' // custom folder

import express from 'express'
import session from 'express-session'
import MongoStore from 'connect-mongo'

// set constant ---
const app = express()
const secret = config.get('secret')

// body parser ---
app.use(bodyParser.json())

// setup session ---
app.use(session({
    genid: function (req) { return uuidv4() }, // random id
    secret,
    store: MongoStore.create({ // connect to MongoDB for Session storage
        mongoUrl: db.extendedURL,
        dbName: db.name,
        ttl: 7 * 24 * 3600 // in seconds
    }),
    cookie: { // cookies manage
        path: '/',
        maxAge: 6000000,
        httpOnly: false,
        secure: false,
        sameSite: false
    },
    stringify: false,
    saveUninitialized: true,
    resave: false,
    rolling: false,
    unset: 'destroy'
}))

// set server port (now run at localhost:5000) ---
app.set('port', 5000)

// set route ---
app.use('/', routes)

路由代码 #

// import libs ---
import express from 'express'

const router = express.Router()

// routes ---
router.post('/login', function (req, res) {
    const { body, session } = req

    try {
        session.user = body.user

        console.log('user', session.user)

        req.session.save(function (err) {
            if (err) return res.status(400).json({ message: err })

            return res.status(200).json({ message: 'You have successfully authenticated' })
        })
    } catch (err) {
        return res.status(400).json({ message: err })
    }
})

router.get('/test', function (req, res) {
    const { session } = req

    try {
        console.log('session', session)

        return res.status(200).json(session)
    } catch (err) {
        return res.status(400).json({ message: err })
    }
})

export default router

已尝试的CORS配置（仅固定源有效） #

app.use(cors({
    origin: 'http://localhost:8080',
    credentials: true
}))

解决方案 #

要实现动态允许所有来源且保持会话一致性，需要调整CORS配置和Session的Cookie参数，具体如下：

1. 动态配置CORS允许任意来源 #

不能直接用origin: '*'（带凭证的跨域请求不允许通配符），而是通过函数动态返回请求的Origin头，同时开启凭证支持：

app.use(cors({
  origin: function (origin, callback) {
    // 允许所有来源，包括无Origin的请求（如Postman、curl）
    callback(null, origin || true);
  },
  credentials: true
}));

2. 调整Session的Cookie配置 #

针对跨域场景优化Cookie参数，同时兼顾安全性：

cookie: {
  path: '/',
  maxAge: 6000000,
  httpOnly: true, // 建议开启，防止XSS攻击，前端无需直接访问Cookie
  secure: process.env.NODE_ENV === 'production', // 生产环境必须开启HTTPS，否则Cookie无法保存
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax' // 跨域场景需设为none，配合secure: true
}

3. 前端确保携带凭证 #

Vue项目中，无论是用axios还是fetch，都要开启凭证携带：

• Axios：在main.js中全局设置

  import axios from 'axios'
  axios.defaults.withCredentials = true
  

• Fetch：每个请求添加配置

  fetch('/api/test', {
    credentials: 'include'
  })
  

关键说明 #

• 浏览器要求：带凭证的跨域请求中，Access-Control-Allow-Origin不能是通配符*，必须是具体的源，所以用动态函数返回请求的Origin既满足灵活需求，又符合浏览器规则。
• 生产环境注意：必须部署在HTTPS服务上，因为sameSite: 'none'要求secure: true，否则浏览器会拒绝保存Session Cookie。
• httpOnly: true不影响会话功能，浏览器会自动在请求时携带Cookie，只是前端无法通过JS读取，提升了安全性。

内容的提问来源于stack exchange，提问作者Mumbarun