生产环境下Next.js中间件无法接收子域名API的Cookie求助

核心原因 #

本地环境下localhost:3000和localhost:4000属于同一域名下的不同端口，浏览器默认共享Cookie；但生产环境中https://api.example.com和https://example.com是跨子域名场景，Cookie需要额外配置才能被主域名的Next.js中间件读取。

具体解决步骤 #

1. 修正Cookie的Domain属性 #

API设置Cookie时，必须指定Domain为.example.com（注意开头的点），这样主域名example.com和子域名api.example.com都能访问该Cookie。如果之前Domain设为api.example.com，主域名的中间件根本读不到。

以Express为例，设置Cookie的代码要改成这样：

res.cookie('Authentication', token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'none',
  domain: '.example.com', // 关键配置
  maxAge: 24 * 60 * 60 * 1000
});

2. 保留正确的SameSite和Secure设置 #

跨子域场景下SameSite=None是必须的，同时要保持Secure=true（生产环境都是HTTPS，符合要求）。HttpOnly属性可以保留——中间件运行在服务器端，能读取HttpOnly类型的Cookie，不影响功能。

3. 验证Cookie配置是否生效 #

登录后打开浏览器开发者工具（Application -> Cookies），查看Authentication和Refresh Cookie的Domain字段是否为.example.com；再检查请求https://example.com时，请求头里的Cookie字段是否包含这两个值。只要浏览器能把Cookie带上，Next.js中间件就能通过request.cookies.get()读取到。

4. 检查Vercel配置 #

确保next.config.js里没有设置拦截Cookie的headers规则，比如不要在headers配置里添加会阻止Cookie传递的跨域策略。

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