如何解决Next.js读取子域API服务器Cookie的跨域问题？

问题根源 #

核心问题是express-session的Cookie域配置错误：生产环境中api.example.com设置的Cookie默认绑定当前子域，导致主域example.com无法读取。

调整Express服务器配置 #

修改express-session的初始化代码，重点配置Cookie的domain、secure等参数：

app.use(session({
  secret: '你的密钥',
  resave: false,
  saveUninitialized: false,
  cookie: {
    domain: '.example.com', // 关键：设为带前缀点的主域，让主域和所有子域都能访问
    secure: true, // 生产环境必须开启，HTTPS下才会传递Cookie
    sameSite: 'lax', // 服务端渲染场景用lax足够；若客户端直接跨域调API，可设为none（需配合secure: true）
    httpOnly: true, // 保持开启防XSS，不影响服务端读取
    maxAge: 24 * 60 * 60 * 1000 // 可选：设置Cookie有效期
  }
}));

• domain: '.example.com'：让example.com和所有子域（包括api.example.com）共享该Cookie
• secure: true：现代浏览器要求HTTPS环境下才会传递带secure标记的Cookie，生产环境必须开启
• sameSite：服务端渲染时用lax即可；如果有前端直接调API的场景，改成none，但必须和secure: true一起用

客户端代码验证 #

你当前的getInitialProps逻辑没问题——服务端渲染时读取请求里的Cookie是有效的，只要Cookie配置正确，Next.js服务端就能拿到connect.sid。

如果之后需要在前端浏览器代码里读取Cookie（非服务端渲染场景），注意httpOnly: true会让前端JS读不到，但你现在的场景不受影响。

额外注意点 #

• 确保生产环境全用HTTPS：只要API或Next.js有一个是HTTP，secure: true会导致Cookie无法设置
• 清除旧Cookie：测试前先清除浏览器里api.example.com的旧Cookie，避免旧配置干扰
• 跨域请求带凭证：如果前端直接调API，请求要加credentials: 'include'，比如：

fetch('https://api.example.com/api/user', {
  credentials: 'include'
});

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