Next.js 14中如何在Middleware读取表单Action设置的Cookie？

1. 先确认Cookie名称是否匹配 #

你在/login/action.ts里设置的Cookie名称是session，但Middleware里尝试读取的是token——这是最直接的错误，先把Middleware里的读取名称改成session再测试。

2. 检查Cookie的path属性设置 #

在App Router的Action中使用cookies().set()时，默认path是当前Action所在的路由路径（比如你的/login/action.ts对应路径为/login），这意味着只有/login及其子路径能读取到该Cookie，其他路由的Middleware自然拿不到。

解决方法是显式设置全局路径：

// /login/action.ts 中的Cookie设置代码
import { cookies } from 'next/headers';

export async function loginAction() {
  // ... 用户验证逻辑
  cookies().set('session', 'your-jwt-token', {
    path: '/', // 关键：设置为根路径，让所有路由可访问
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 开发环境设为false，生产环境必须设为true
    maxAge: 60 * 60 * 24 * 7, // 有效期7天
    sameSite: 'lax',
  });
  // ... 重定向逻辑
}

3. 确认Middleware中读取Cookie的方式正确 #

Next.js 14的Middleware必须通过NextRequest对象的cookies读取，不能使用next/headers导出的cookies()（后者仅适用于Server Components、Actions）：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 注意：这里是request.cookies，不是import的cookies()
  const sessionCookie = request.cookies.get('session');
  console.log(sessionCookie); // 现在应该能拿到值了

  // ... 受保护路由逻辑
}

export const config = {
  matcher: ['/dashboard/:path*'], // 按需设置需要保护的路由
};

4. 排查重定向与Cookie生效时机 #

如果登录Action中设置Cookie后立即执行redirect，要确保cookies().set()在重定向前执行完成——Next.js会在响应发送前处理Cookie设置，但如果有异步逻辑，需确保Cookie设置代码已执行。

5. 清除缓存 #

开发环境中，浏览器或Next.js的缓存可能导致状态异常：

• 打开浏览器开发者工具，清除对应域名的Cookie
• 重启Next.js开发服务器
• 在开发者工具中勾选「Disable cache」禁用浏览器缓存

6. 检查Cookie的secure和SameSite属性 #

• 开发环境未使用HTTPS时，secure必须设为false，否则浏览器不会保存Cookie
• SameSite设为lax是安全的默认值，若设为strict，在部分跳转场景（如外部链接进入）可能无法携带Cookie

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