Next.js使用API Routes时出现"Method not allowed"错误如何解决？

核心问题分析 #

你遇到的405错误，本质是App Router的API路由写法不符合规范，同时前端请求格式和后端Pinata调用也存在格式冲突问题，以下是分步修复方案：

1. 修正API路由的写法（解决405错误的关键） #

Next.js App Router的API路由要求导出对应HTTP方法的异步函数（如POST、GET），而非Pages Router的默认handler函数。旧写法在App Router中无法被识别为POST请求的处理逻辑，因此返回405错误。

修改app/api/pinToIPFS/route.js为以下代码：

export async function POST(request) {
  try {
    // 正确获取前端传来的FormData
    const formData = await request.formData();
    
    const JWT = process.env.PINATA_JWT;
    const response = await fetch("https://api.pinata.cloud/pinning/pinFileToIPFS", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${JWT}`,
        // 无需手动设置Content-Type，fetch会自动处理multipart/form-data格式
      },
      body: formData,
    });

    const data = await response.json();
    return Response.json(data, { status: 200 });
  } catch (error) {
    console.error("Error pinning file to IPFS:", error);
    return Response.json({ error: "Error pinning file to IPFS" }, { status: 500 });
  }
}

// 若需处理其他方法，可导出对应函数（如GET），避免返回405
export async function GET() {
  return Response.json({ error: "Method not allowed" }, { status: 405 });
}

2. 修正前端fetch请求的格式问题 #

前端传递FormData时，手动设置Content-Type: application/json会导致请求格式冲突，浏览器无法正确解析表单数据。移除该头后，浏览器会自动添加multipart/form-data; boundary=xxx的正确请求头。

修改page.tsx中的handleSubmit函数：

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();

  const formData = new FormData();
  formData.append(
    "file",
    new Blob([JSON.stringify(form)], { type: "application/json" })
  );

  try {
    const res = await fetch("/api/pinToIPFS", {
      method: "POST",
      // 移除手动设置的Content-Type，让浏览器自动处理
      body: formData,
    });

    // 新增非2xx状态码的错误处理
    if (!res.ok) {
      const errorData = await res.json();
      throw new Error(errorData.error || "Request failed");
    }

    const resData = await res.json();
    console.log("resData:", resData);
  } catch (error) {
    console.error("Error uploading file:", error);
    alert("Trouble uploading file");
  }
};

3. 修正Pinata API调用的格式 #

Pinata的pinFileToIPFS接口要求使用multipart/form-data格式上传文件，直接传递FormData即可，无需手动设置Content-Type，fetch会自动处理边界符等细节，确保请求符合Pinata的接口规范。

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