405（不允许的方法）Vercel FastAPI 后端错误（但在本地工作）

Question

我刚刚在 Vercel 上部署了 NextJS-frontend/FastAPI-backend 应用程序，目前遇到了一个似乎与 CORS 相关的问题，当我尝试从前端。

就上下文而言，这适用于我的本地开发环境，其中前端位于

405 Method Not Allowed

，后端位于

localhost:3000

下面是错误的附图。

我尝试了一些方法，这是我的

localhost:8000

位于我的目录根目录

next.config.js

然后在我的 

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? {NEXT_PUBLIC_LOCALHOST_URL} + "/:path*"
            : "/",
      }
    ];
  },
  async headers() {
    return [
      {
        // matching all API routes
        source: "/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          { key: "Access-Control-Allow-Methods", value: "*" },
          { key: "Access-Control-Allow-Headers", value: "*" },
        ]
      }
    ]
  }
};

module.exports = nextConfig;

（FastAPI 后端的入口点）中，我有以下策略：

main.py

有趣的是，如果我尝试使用 cURL 并向端点发送 POST/GET 请求，我不会得到任何回报。

Answer 1

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from api.v1.endpoints import text, image, video, index

app = FastAPI()

# Add CORS middleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
    expose_headers=["*"]
)

@app.get("/")
async def root():
    return {"message": "Welcome to the API!"}

app.include_router(text.router)
app.include_router(image.router)
app.include_router(video.router)
app.include_router(index.router)

。 您应该明确指定允许的来源