Vercel+Cloudflare域名下Next.js App Router生产环境405方法不允许问题

我在生产环境遇到**405 Error（Method not allowed）**错误，但本地环境运行完全正常。项目使用Next.js的App Router，域名托管在Cloudflare。已尝试禁用防火墙、关闭DNS设置中的代理，但问题仍未解决。

环境信息 #

VERCEL_URL: https://www.cloudflaredomain.app

page.tsx 代码 #

const baseUrl = process.env.VERCEL_URL
    ? `https://${process.env.VERCEL_URL}`
    : "";

const sendEmail = async (emailValue: string) => {
    await fetch(`${baseUrl}/api/addcontact`, {
      method: "PUT",
      body: JSON.stringify({
        emailValue,
      }),
    });

route.ts 代码 #

import { NextRequest, NextResponse } from "next/server";
const client = require("@sendgrid/client");

client.setApiKey(process.env.NEXT_PUBLIC_SENDGRID_API_KEY);

export async function PUT(req: NextRequest) {
  const { emailValue } = await req.json();
  console.log(`${emailValue} is the email value`);
  const data = {
    contacts: [
      {
        email: emailValue,
      },
    ],
  };

  const request = {
    url: "/v3/marketing/contacts",
    method: "PUT",
    body: data,
  };

  try {
    const [response, body] = await client.request(request);
    console.log(response.statusCode);
    console.log(body);
    return NextResponse.json({ status: "Ok" });
  } catch (error) {
    console.error(error);
    return NextResponse.json({ message: "Error sending email" });
  }
}

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