Vercel部署Next.js+Express中express-sessions的Set-Cookie无法设置

核心问题 #

部署在Vercel的Next.js 13应用，搭配Express后端使用express-sessions做Google OAuth登录时，后端返回的Set-Cookie头无法被浏览器保存，但本地开发正常，且邮箱密码登录的接口能正常设置Cookie。问题大概率出在多重重定向的跨站点Cookie处理逻辑以及生产环境的Cookie配置上。

具体解决方案 #

1. 调整Cookie的SameSite与Domain配置 #

生产环境下跨站点重定向场景中，默认的SameSite: Lax可能无法满足浏览器的Cookie安全策略，需针对性调整：

• 若前端与后端为同主域名下的子域名（如web.yourdomain.com和api.yourdomain.com），显式设置cookie.domain为根域名，让Cookie在整个主域名下生效；
• 若为完全独立的域名，将SameSite设为None（必须配合secure: true，生产环境已满足该条件），这是跨站点Cookie生效的必要配置。

修改后的express-sessions配置：

app.use(
    session({
        name: 'sessionID',
        cookie: {
            maxAge: SESSION_LIFETIME as number,
            sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
            secure: process.env.NODE_ENV === 'production',
            httpOnly: true,
            domain: process.env.COOKIE_DOMAIN || '.yourdomain.com' // 替换为你的主域名
        },
        resave: false,
        secret: SESSION_SECRET as string,
        saveUninitialized: false,
        store: redisStore
    })
);

2. 简化OAuth回调流程，减少重定向次数 #

当前流程Google→Next.js路由→后端→Next.js多了一次不必要的跳转，增加了跨站点Cookie的处理难度。优化为：

• 将Google OAuth的回调地址直接设为后端接口（如https://api.yourdomain.com/auth/google/callback）；
• 后端处理完OAuth逻辑后，直接重定向回Next.js应用，跳转链缩短为Google→后端→Next.js，降低浏览器拒绝Cookie的概率。

3. 改用前端AJAX请求处理回调 #

若无法修改Google回调地址，可调整为前端发起API请求的方式：

1. Google登录成功后重定向到Next.js的回调路由，路由获取URL中的code参数；
2. 在Next.js路由组件中，通过fetch或Axios发起POST请求到后端接口（如/api/auth/google），携带code参数，并设置credentials: 'include'；
3. 后端处理完成后返回200响应，携带Set-Cookie头（与邮箱密码登录接口逻辑一致），此时浏览器会正常保存Cookie；
4. 前端收到响应后，自行跳转到首页。

示例Next.js请求代码：

// Next.js回调路由组件中
async function handleCallback() {
  const code = new URLSearchParams(window.location.search).get('code');
  await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/google`, {
    method: 'POST',
    credentials: 'include',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ code })
  });
  window.location.href = '/';
}

4. 检查并完善CORS配置 #

确保后端CORS配置允许前端域名请求，并开启凭证支持：

const cors = require('cors');
app.use(cors({
    origin: process.env.WEB_URL, // 替换为你的Next.js域名
    credentials: true // 允许请求携带Cookie
}));

验证步骤 #

1. 打开浏览器开发者工具→Application→Cookies，检查是否存在sessionID；
2. 查看Network面板中后端响应的Set-Cookie头，确认domain、SameSite、secure属性是否符合配置；
3. 检查浏览器控制台是否有Cookie相关的警告信息（如SameSite属性不合法）。

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