NextJS中Middleware设置的请求头在路由处理器中无法获取的原因

核心原因 #

• Next.js 中 NextRequest 的 headers 是不可变对象，直接调用 request.headers.set() 无法修改原始请求的 header 集合。
• 即使强行修改，NextResponse.next() 默认不会将修改后的 headers 传递给后续的路由处理器，必须显式配置传递修改后的请求上下文。

修正后的代码 #

Middleware 代码 #

export async function middleware(request: NextRequest) {
  // 复制原请求的 headers 到新的可修改对象中
  const newHeaders = new Headers(request.headers);
  newHeaders.set('Custom-Header', 'Custom-Value');

  // 通过 NextResponse.next() 传递修改后的 headers
  return NextResponse.next({
    request: {
      headers: newHeaders,
    },
  });
}

路由处理器代码（无需修改） #

export async function GET(request: NextRequest) {
  const customHeaderValue = request.headers.get('Custom-Header');
  console.log(customHeaderValue); // 现在会输出 "Custom-Value"
}

补充说明 #

Next.js 的 Middleware 设计中，原始请求对象是被封装的只读实例，所有对请求上下文的修改都需要通过 NextResponse 的配置参数传递，这样后续的路由处理流程才能感知到这些修改。

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