Passport-Google-OAuth回调中设置Cookie失败的问题排查与解决

核心原因 #

1. 跨域同源策略限制：部署后Express与Next.js分属不同域名，浏览器默认阻止跨域环境下的Cookie设置，未配置合规的Cookie属性时无法突破限制。
2. Cookie属性缺失：生产环境需额外配置secure、sameSite、domain属性，开发环境HTTP协议下无需这些配置，直接部署会导致浏览器拒绝接受Cookie。
3. 会话Cookie配置错误：Passport会话的Cookie未配置跨域支持，导致会话仅在回调路由内有效，后续请求无法携带会话信息。

解决方法 #

1. 完善Cookie配置（含业务Cookie与会话Cookie） #

在Express的回调函数中修改tk Cookie的配置，同时调整Passport会话的Cookie属性：

业务Cookie（tk）修改示例：

const googleCallback = async (req, res) => {
  const user = req.session.passport.user;
  const encodedTk = jwToken.encodeToken(user);

  res.cookie("tk", encodedTk, {
    maxAge: 24 * 60 * 60 * 1000,
    secure: true, // 生产环境HTTPS下必填，仅HTTPS传输
    sameSite: 'none', // 跨域场景必填，允许跨站点传递Cookie
    domain: '.your-root-domain.com', // 若Express与Next.js为同一根域名的子域名，如api.xxx.com和app.xxx.com，设为.xxx.com
    httpOnly: true // 可选，防止XSS攻击，若前端无需读取该Cookie建议开启
  });

  res.redirect("<nextjs-app.domain>");
};

Passport会话Cookie配置示例：

app.use(session({
  secret: 'your-session-secret',
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: 24 * 60 * 60 * 1000,
    secure: true,
    sameSite: 'none',
    domain: '.your-root-domain.com'
  }
}));

2. 配置Express的CORS规则 #

允许Next.js域名的跨域请求，并开启凭证携带：

const cors = require('cors');
app.use(cors({
  origin: 'https://nextjs-app.domain', // 替换为你的Next.js实际域名
  credentials: true // 允许请求携带Cookie等凭证
}));

3. 确保生产环境使用HTTPS #

secure: true和sameSite: 'none'属性仅在HTTPS环境下生效，若部署时未配置HTTPS，浏览器会直接拒绝这类Cookie。

4. Next.js接口请求配置 #

后续Next.js向Express发起接口请求时，需携带凭证：

const fetchUserInfo = async () => {
  const response = await fetch('https://express.domain/api/user', {
    credentials: 'include' // 确保携带Cookie
  });
  const data = await response.json();
  // 处理数据
};

特殊场景处理（非同源主域名） #

若Express与Next.js为完全不同的主域名（如a.com和b.com），无法通过domain属性共享Cookie，可改用以下方案：

• 将Next.js的认证请求通过API路由代理到Express，避免跨域
• 认证成功后将token通过URL参数传递到Next.js，再由Next.js存入本地存储（注意安全性，需做校验）

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