Next.js Middleware仅刷新后读取Cookie？Vercel部署遇权限异常

针对你遇到的Vercel部署后登录无法直接访问受保护路由、需刷新才正常的问题，以下是具体的排查和解决方法：

• 修正Cookie的属性配置
  登录接口设置Cookie时，必须确保几个关键属性正确：

  • Path=/：让Cookie在全站路由生效，避免仅在登录接口路径下可见
  • SameSite=Lax：适配Vercel的HTTPS环境，确保客户端路由跳转时Cookie能被携带
  • Secure：生产环境（Vercel）必须开启，本地环境可根据NODE_ENV判断是否添加
  • HttpOnly：提升安全性的同时，不影响Middleware读取
    示例代码（Next.js API路由）：

  import { NextResponse } from 'next/server';
  
  export async function POST(request: Request) {
    // 验证登录逻辑...
    const response = NextResponse.json({ success: true });
    response.cookies.set({
      name: 'sessionId',
      value: '你的会话ID',
      path: '/',
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
      httpOnly: true,
      maxAge: 86400,
    });
    return response;
  }
  

• 登录后改用硬跳转而非客户端路由
  Next.js的客户端路由（router.push/Link组件）是SPA模式，不会触发完整的HTTP请求，Middleware仅在初始页面加载或刷新时运行。登录成功后直接用window.location.href跳转到受保护页面，强制发起完整请求，让Middleware能读取到最新的Cookie：

  // 登录成功后的处理逻辑
  const handleLoginSuccess = () => {
    // 不要用 router.push('/dashboard')
    window.location.href = '/dashboard';
  };
  

• 禁用Middleware的Edge缓存
  Vercel的Edge Runtime可能会缓存Middleware的执行结果，导致Cookie读取延迟。在middleware.ts中明确配置禁用缓存，并确保匹配器仅针对受保护路由：

  export const config = {
    matcher: ['/protected/:path*'], // 仅对受保护路由生效
    unstable_cache: false, // 禁用缓存（若使用稳定版Next.js，可检查官方文档确认最新配置）
  };
  

  同时检查Vercel控制台的缓存规则，避免对受保护路由设置缓存策略。

• 确保Middleware正确读取Cookie
  直接使用Next.js提供的request.cookies方法读取，不要手动解析Cookie请求头，避免Edge Runtime下的解析错误：

  import { NextResponse } from 'next/server';
  import type { NextRequest } from 'next/server';
  
  export function middleware(request: NextRequest) {
    const sessionId = request.cookies.get('sessionId')?.value;
    if (!sessionId && request.nextUrl.pathname.startsWith('/protected')) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
  }
  

• 验证Cookie的实际生效状态
  登录后在浏览器开发者工具的「Application」标签下，检查Cookie是否存在、属性是否符合预期（路径、SameSite、Secure等），排除客户端未正确接收Cookie的情况。

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