Next.js 13中如何在middleware设置请求头并在route.js中获取

问题原因 #

在Next.js 13中，直接通过NextResponse.next()修改请求头时，这些修改不会自动传递到后续的route.js处理逻辑中。这是因为next()方法不会创建新的请求对象，仅传递原始请求的引用，导致自定义请求头无法被后端路由读取。

正确实现方案 #

1. Middleware.js 正确写法 #

需要克隆原始请求，添加自定义请求头后，通过NextResponse.rewrite将修改后的请求传递给目标路由：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 匹配/products路径
  if (request.nextUrl.pathname.startsWith('/products')) {
    // 克隆原始请求，保留原有属性并添加自定义头
    const modifiedRequest = new Request(request.url, {
      headers: new Headers(request.headers),
      method: request.method,
      body: request.body,
      redirect: request.redirect
    });
    // 设置自定义请求头
    modifiedRequest.headers.set('requestHeaderValue', 'hello');

    // 重写请求，将修改后的请求传递给路由
    const response = NextResponse.rewrite(request.nextUrl, modifiedRequest);
    // 同时设置响应头（仅返回给客户端，与路由读取的请求头无关）
    response.headers.set('requestHeaderValue', 'hello');
    return response;
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/products/:path*',
};

2. Route.js 获取请求头 #

在route.js中通过headers()方法正常获取即可：

// app/products/route.js
import { headers } from 'next/headers';

export async function GET() {
  const headersList = headers();
  const requestHeaderValue = headersList.get('requestHeaderValue');
  console.log(requestHeaderValue); // 现在会输出'hello'

  return new Response('Product Page', {
    headers: { 'Content-Type': 'text/plain' },
  });
}

关键说明 #

• 必须使用new Request()克隆原始请求并修改头，再通过NextResponse.rewrite传递，后端路由才能接收到修改后的请求头。
• 避免直接修改request.headers后返回NextResponse.next()，这种方式下修改的头不会传递到服务器端的路由处理。
• 响应头的设置是返回给前端客户端的，和路由读取的请求头是两个独立的部分。

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