Next.js中间件中无法删除Cookie的问题及解决方法

你在Next.js中间件中尝试删除access_token Cookie，但执行删除操作后，通过req.cookies.get('access_token')仍能获取到原有值，使用的代码如下：

import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";
export function middleware(req: NextRequest, ev: NextFetchEvent) {
  const cookie = req.cookies.get('access_token')?.value;
  const headers: any = req.headers;
  const response = NextResponse.next();

  console.log('req.headers ', headers.get('logout'))
  if (headers.get('logout')) {
    console.log(cookie);
    response.cookies.delete('access_token');
    console.log(req.cookies.get('access_token')?.value); // still logs the cookie
  }

  return response;
}

问题原因 #

• req.cookies存储的是客户端发送请求时携带的Cookie数据，请求一旦到达服务器，这个值就已经固定，不会因为修改响应对象的Cookie而改变。
• response.cookies.delete('access_token')的作用是在响应头中添加删除Cookie的指令，通知客户端浏览器删除对应Cookie，而非修改当前请求的Cookie内容。

正确处理方式 #

要验证删除操作是否生效，需检查响应对象的Cookie状态，而非请求对象。另外，如果设置Cookie时指定了域名、路径等属性，删除时需保持一致，否则删除指令可能无效。

修改后的代码示例：

import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";
export function middleware(req: NextRequest, ev: NextFetchEvent) {
  const headers = req.headers;
  const response = NextResponse.next();

  console.log('req.headers ', headers.get('logout'))
  if (headers.get('logout')) {
    // 记录请求中的原有Cookie值
    console.log('请求中的access_token:', req.cookies.get('access_token')?.value);
    
    // 删除响应中的Cookie，若设置时指定了域名/路径，需对应添加
    response.cookies.delete('access_token', {
      path: '/', // 默认路径为'/'，若设置时不同需修改
      // domain: 'your-domain.com', // 若设置了域名，需匹配该值
    });

    // 检查响应中的Cookie状态，确认是否已删除
    console.log('响应中的access_token:', response.cookies.get('access_token')?.value); // 应返回undefined
  }

  return response;
}

额外说明 #

• 客户端浏览器收到响应后，会根据响应头指令删除Cookie，后续发起的请求将不再携带该Cookie。
• 若删除后客户端仍存在Cookie，检查Cookie的域名、路径属性是否与删除指令匹配，不匹配会导致删除失败。

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