使用 API 路由在下一个 js 中获取“方法不允许”

Question

尝试在下一个js中使用API路由从服务器端调用带有POST方法的api，但收到“Method not allowed”错误。

我的page.tsx有一个表单；提交表单必须触发

handleSubmit

函数，该函数必须调用app/api/pinToIPFS/route.js中的函数，该函数将调用API上的POST方法。我希望在服务器端调用API。

"use client";

import { useState } from "react";
import "../../globals.css";
import Link from "next/link";


function CreatePage() {

  const [form, setForm] = useState({ address: "", title: "", proposal: "" });


  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",
        headers: {
          "Content-Type": "application/json",
        },
        body: formData,
      });

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

  return (
      <form
        onSubmit={handleSubmit}
      ></form>

这是 api/pinToIPFS/ 中的route.js

export default async function handler(req, res) {
  if (req.method === "POST") {
    try {

      const formData = req.body;


      const JWT = process.env.PINATA_JWT;
      const response = await fetch(
        "https://api.pinata.cloud/pinning/pinFileToIPFS",
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${JWT}`,
            "Content-Type": "application/json",
          },
          body: formData,
        }
      );


      const data = await response.json();

      res.status(200).json(data);
    } catch (error) {
      console.error("Error pinning file to IPFS:", error);
      res.status(500).json({ error: "Error pinning file to IPFS" });
    }
  } else {
    
    res.status(405).json({ error: "Method not allowed" });
  }
}

我在控制台中收到此错误：

page.tsx:81       
POST http://localhost:3000/api/pinToIPFS 405 (Method Not Allowed)

page.tsx:94 
Error uploading file: SyntaxError: Unexpected end of JSON input
    at handleSubmit (page.tsx:89:33)

这是 page.tsx 中的第 80-97 行：

    try {
      const res = await fetch("/api/pinToIPFS", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: formData,
      });

      const resData = await res.json();
      console.log("done!");

      console.log("resData:", resData);
    } catch (error) {
      console.log("Error uploading file:", error);
      alert("Trouble uploading file");
      setUploading(false);
    }

如何解决这个问题？

Answer 1

在route.ts函数中必须调用POST，并且FormData应该在route.ts中形成，而不是page.tsx

export async function POST(req: Request) {
  console.log("ok, im in post");

  // Extract data from the request body

  const form = await new Response(req.body).json();
  console.log("this is form in post:", form);

  const JWT = process.env.PINATA_JWT;

  const formData = new FormData();
  formData.append(
    "file",
    new Blob([JSON.stringify(form)], { type: "application/json" })
  );
  const response = await fetch(
    "https://api.pinata.cloud/pinning/pinFileToIPFS",
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${JWT}`,
      },
      body: formData,
    }
  );

  // Handle the response from Pinata
  const data = await response.json();
  console.log("this is original response:", response);
  console.log("pinata reponse:", data);

  // Respond with the data returned by Pinata
  return NextResponse.json(data, { status: 200 });
}