Next.js自定义服务器配置下Session Cookie无法持久化问题

问题背景 #

使用Next.js（前端）+ Express（后端）自定义服务器对接，登录后浏览器已存储Session Cookie，但刷新页面后仍需重新登录，后端返回未认证状态。已完成的修改：前端请求添加credentials:'include'，调整Express Session的Cookie配置（domain改为127.0.0.1、secure:false）。

核心问题排查与修复方案 #

1. 修正CORS Origin配置，匹配前端实际访问地址 #

当前CORS配置允许的Origin是http://127.0.0.1:8000和http://localhost:8000，但后端运行在3000端口，若前端直接通过自定义服务器访问3000端口，Origin会是http://127.0.0.1:3000，不在允许列表内，导致后续请求无法正确携带Cookie。

修改app.js中的CORS配置：

const corsConfig = {
  methods:'*',
  // 添加前端实际访问的3000端口地址
  origin:['http://127.0.0.1:3000','http://localhost:3000','http://127.0.0.1:8000','http://localhost:8000'],
  credentials:true
}

2. 完善Session Cookie的Path属性 #

默认Cookie的Path为/，但显式配置可避免路径匹配异常，确保所有路由都能获取Cookie：

app.use(session({
  store: new pgSessionStore({
    pool:pool,
    tableName:'session',
    createTableIfMissing:true
  }),
  secret: process.env.SESSION_SECRET,
  resave: false, // 关闭不必要的Session重复保存
  saveUninitialized: false, // 不保存未初始化的Session，提升安全性
  cookie: { 
    maxAge: 365 * 24 * 60 * 60 * 1000,
    httpOnly: true, 
    domain:'127.0.0.1',
    secure: false,
    path: '/' // 显式指定Cookie生效路径
  },
}))

3. 确保Next.js页面渲染时能读取Session #

Next.js自定义服务器中，页面请求需经过Session中间件处理，才能在服务器端渲染（SSR）时获取Session状态。可在页面的getServerSideProps中添加登录校验：

// 示例：登录后页面的服务器端校验
export async function getServerSideProps(context) {
  const { req } = context;
  // 检查Session是否存在有效用户ID
  if (!req.session?.sessionId) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  return { props: { userId: req.session.sessionId } };
}

4. 添加登录状态验证中间件 #

在后端需要权限的API路由中，添加中间件校验Session有效性：

// 登录验证中间件
function requireAuth(req, res, next) {
  if (req.session?.sessionId) {
    return next();
  }
  return res.status(401).json({ message: '未认证' });
}

// 在路由中使用中间件
router.get('/api/user/profile', requireAuth, (req, res) => {
  res.json({ userId: req.session.sessionId });
});

5. 统一前端请求URL #

避免硬编码域名，使用相对路径发起请求，减少跨域匹配问题：

fetch('/api/login/', {
  credentials:'include',
  method:'POST',
  body:JSON.stringify(loginInfo),
  headers:{'content-type':'application/json'}
})

总结 #

调整核心要点：

• CORS Origin覆盖前端所有可能的访问地址
• Session Cookie的路径、域名配置准确，确保所有请求可携带
• 后端添加统一的登录状态校验中间件
• Next.js页面通过服务器端逻辑读取Session做权限控制

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