Next.js中间件与Cookie问题：登出无法一致清除Cookie

你遇到的登出Cookie清除不一致（本地正常、Vercel部署失效），核心原因是删除Cookie时没有完全匹配登录时设置的所有属性，再加上middleware中存在无效处理逻辑。以下是具体修复步骤和最佳实践：

1. 修复登出路由（logout/route.ts） #

浏览器删除Cookie时，要求删除指令的属性（domain、secure、path等）必须与设置Cookie时完全一致，否则会判定为不同Cookie，无法删除目标令牌。修改后的代码：

import { NextResponse, NextRequest } from "next/server";

export function POST(request: NextRequest) {
    try {
        const response = NextResponse.json({ message: "Success" }, { status: 200 });
        const isLocalhost = request.url.includes('localhost');
        
        // 完全匹配登录时的Cookie属性
        response.cookies.set('token', '', {
            httpOnly: true,
            path: '/',
            sameSite: 'lax',
            secure: !isLocalhost,
            expires: new Date(0),
            ...(isLocalhost ? {} : { domain: 'swiftship-nine.vercel.app' })
        });
        
        return response;
    } catch (error) {
        return NextResponse.json({ message: "Failed to log out" }, { status: 400 });
    }
}

2. 移除Middleware中无效的/api/logout处理 #

你当前middleware中这段代码完全无效：

if (pathname.startsWith("/api/logout")) {
    const res = NextResponse.next();
    res.cookies.set("token", "", { expires: new Date(0) });
}

问题在于创建了res但没有返回，代码不会执行任何实际操作，还会和登出路由的处理重复，直接删除即可。

3. 优化Middleware令牌验证失败的Cookie清除 #

在令牌验证失败（过期、无效）时，主动清除残留的无效Cookie，避免后续路由判断错误：
修改middleware中所有catch块的逻辑，以用户受保护路由的catch为例：

catch (error) {
    const res = NextResponse.redirect(new URL('/login', request.url));
    const isLocalhost = request.url.includes('localhost');
    
    // 清除无效令牌
    res.cookies.set('token', '', {
        httpOnly: true,
        path: '/',
        sameSite: 'lax',
        secure: !isLocalhost,
        expires: new Date(0),
        ...(isLocalhost ? {} : { domain: 'swiftship-nine.vercel.app' })
    });
    
    return res;
}

Next.js结合Middleware管理Cookie的最佳实践 #

统一Cookie配置 #

把Cookie通用配置抽成工具函数，避免重复编写导致的属性不一致：

// utils/cookie.ts
import { NextRequest } from "next/server";

export function getCookieOptions(request: NextRequest) {
    const isLocalhost = request.url.includes('localhost');
    return {
        httpOnly: true,
        path: '/',
        sameSite: 'lax' as const,
        secure: !isLocalhost,
        ...(isLocalhost ? {} : { domain: 'swiftship-nine.vercel.app' })
    };
}

之后在登录、登出、middleware中直接调用该函数，保证属性完全一致。

优先使用maxAge替代expires #

maxAge是相对时间（秒），比expires的绝对时间更可靠（避免跨时区问题）：

• 登录时：maxAge: 86400（1天）
• 删除时：maxAge: -1（立即过期）

避免重复逻辑 #

不要在middleware和API路由中重复处理同一操作（比如登出的Cookie清除），推荐在API路由中处理，逻辑更直观。

安全强化 #

• 不要硬编码JWT密钥，改用Vercel环境变量（process.env.JWT_SECRET）
• 生产环境强制secure: true，确保Cookie仅通过HTTPS传输
• sameSite设为strict或lax，防范CSRF攻击

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