我刚刚在 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 请求,我不会得到任何回报。
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)
。 您应该明确指定允许的来源