Next.js 15中Cookie设置失效问题排查求助

你在Next.js 15的middleware.ts中通过res.cookies.set()设置了HttpOnly Cookie，函数内部能读取到该Cookie，但浏览器并未存储。结合你的代码，以下是可能的原因及对应排查/解决方法：

可能的原因与解决方案 #

1. 误判HttpOnly Cookie的存在性 #

你设置了httpOnly: true，这类Cookie无法通过前端JavaScript的document.cookie读取，但会正常出现在浏览器开发者工具的「Application > Cookies」面板中。请先到该面板确认Cookie是否存在，不要用JS代码判断。

2. Clerk中间件的响应覆盖问题 #

clerkMiddleware的回调返回的响应需要确保是最终发送给浏览器的响应。检查auth.protect()是否在某些场景下触发了重定向（比如用户未登录时），导致你后续设置Cookie的res未被实际返回。可以在auth.protect()后添加日志，确认代码是否走到了设置Cookie的逻辑分支。

3. 开发环境HTTPS下的Secure属性不匹配 #

如果你的开发环境启用了HTTPS（比如使用Next.js的--experimental-https参数），此时process.env.NODE_ENV仍为development，secure会被设为false，但HTTPS环境下浏览器要求Cookie的secure属性为true才会存储。可以临时调整配置测试：

res.cookies.set('auth_token', bearerToken.token, {
  httpOnly: true,
  secure: process.env.NODE_ENV !== 'development', // 或直接设为true测试
  sameSite: 'strict',
  path: '/',
  maxAge: 60 * 60 * 24,
});

4. 响应创建时机过早导致的状态锁定 #

Next.js Middleware中，提前创建的NextResponse.next()可能会在异步操作过程中被锁定状态，导致后续的Cookie设置不生效。可以将响应创建的时机延后到异步操作完成后：

// 修改后代码片段
if (userId){
  const bearerToken = await loginUser(userIdGUiD);
  if (bearerToken.token) {
    const res = NextResponse.next(); // 延后创建响应
    res.cookies.set('auth_token', bearerToken.token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'strict',
      path: '/',
      maxAge: 60 * 60 * 24,
    });
    console.log("Cookie", res.cookies.get('auth_token')?.value);
    return res;
  }
}
return NextResponse.next();

5. SameSite属性的严格限制 #

sameSite: 'strict'会限制Cookie仅在同域请求中发送，但不会影响同域场景下的存储。如果你的请求来自外部域名跳转，可以临时改为sameSite: 'lax'测试是否能正常存储Cookie。

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