NextJS 13中间件POST请求重写失效，如何解决？

问题原因 #

1. 你原有的中间件代码仅指定了重写目标URL，没有传递POST请求的方法、请求头和请求体，导致内部服务器无法接收body。
2. 当项目中存在自定义中间件时，next.config.js中的rewrite规则会被跳过（中间件优先级更高），所以必须在中间件内完成所有重写逻辑。

解决方案 #

手动在中间件中处理请求体的转发，同时保留原请求的方法、头信息，并添加自定义请求头。核心是通过NextResponse.rewrite的第二个参数传递完整的请求配置。

修改后代码 #

import { NextRequest, NextResponse, URLPattern } from "next/server";
import { endpoint } from "@/utils";

export const config = {
  matcher: "/api/:path*"
};

const pattern = new URLPattern({ pathname: "/api/:path*" });

export async function middleware(req: NextRequest) {
  const result = pattern.exec(req.url);
  if (result) {
    // 安全拼接目标URL，避免双斜杠问题
    const targetUrl = new URL(result.pathname.groups.path || "", endpoint).toString();
    
    // 读取请求体（支持所有格式：JSON、表单、二进制等）
    const body = await req.text();
    
    // 复制原请求头，添加自定义请求头
    const headers = new Headers(req.headers);
    headers.set("X-Custom-Header", "your-custom-value"); // 替换为你的自定义头
    
    // 构建重写请求配置，保留原请求的核心信息
    const rewriteConfig: RequestInit = {
      method: req.method,
      headers: headers,
      // GET/HEAD方法不能携带body，需做判断
      body: req.method !== "GET" && req.method !== "HEAD" ? body : undefined,
      redirect: "manual"
    };

    // 执行重写并返回响应
    return NextResponse.rewrite(new URL(targetUrl), rewriteConfig);
  }

  // 不匹配/api路径的请求直接放行
  return NextResponse.next();
}

关键细节说明 #

• 请求体读取：用req.text()读取原始请求体，兼容所有内容类型（JSON、表单数据等），如果明确是JSON格式，也可以用req.json()，但需要确保后续头信息中的Content-Type正确。
• 请求头处理：通过new Headers(req.headers)复制原有请求头，避免覆盖必要的头信息（如Content-Type、Authorization等），再添加自定义头。
• 方法判断：严格遵循HTTP规范，GET/HEAD方法不传递body，避免触发错误。
• URL拼接：用new URL(path, baseUrl)的方式拼接目标地址，自动处理路径中的斜杠问题，比字符串拼接更可靠。

内容的提问来源于stack exchange，提问作者이동헌