如何在本地同一子域名下运行多个Next.js项目并共享Http-only Cookie

核心前提 #

浏览器同源策略默认限制不同端口的站点共享Cookie，但通过调整Cookie属性和前后端配置可突破该限制，关键在于统一Cookie的Domain属性、配置正确的SameSite规则，以及开启跨域凭证支持。

具体实现步骤 #

1. 后端设置Cookie的关键属性 #

在后端生成Http-only Cookie时，必须指定以下属性：

• Domain=localhost：将Cookie绑定到localhost域名，而非具体端口，让不同端口的localhost站点都能识别该Cookie。
• SameSite=None：允许跨站点请求携带Cookie（注意：生产环境必须配合Secure属性，本地HTTP环境下部分现代浏览器会豁免此限制）。
• HttpOnly：保留该属性防止前端JS直接访问Cookie，保障安全性。
• Path=/：确保Cookie在整个域名下的所有路径都生效。

示例（Node.js/Express环境）：

res.cookie('authToken', 'your-token-content', {
  httpOnly: true,
  domain: 'localhost',
  sameSite: 'none',
  secure: process.env.NODE_ENV === 'production', // 生产环境强制开启Secure
  path: '/',
  maxAge: 24 * 60 * 60 * 1000 // 设置1天有效期
});

2. 后端配置CORS允许凭证 #

跨域请求时，后端必须明确允许携带凭证，否则浏览器会拒绝发送Cookie。

示例（Express的cors中间件配置）：

const cors = require('cors');
app.use(cors({
  origin: ['http://localhost:3000', 'http://localhost:3001'], // 指定允许的跨域源
  credentials: true // 开启凭证支持
}));

3. 前端请求携带凭证 #

前端发起跨域请求时，需明确设置携带凭证，否则Cookie不会被自动发送。

示例（Fetch API）：

fetch('http://localhost:3001/api/resource', {
  method: 'GET',
  credentials: 'include' // 携带Cookie
});

示例（Axios）：

axios.get('http://localhost:3001/api/resource', {
  withCredentials: true
});

4. 浏览器兼容性注意事项 #

• 旧版浏览器不支持SameSite=None，若需兼容可降级为SameSite=Lax，但会限制部分跨场景的Cookie携带能力。
• 若本地开发时浏览器强制要求Secure属性，可通过mkcert生成自签名证书开启本地HTTPS解决。

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