使用JavaScript fetch()向FastAPI发送POST请求时遭遇405 Method Not Allowed错误

问题分析与修复方案 #

核心问题：405 Method Not Allowed 原因及解决 #

1. 缺失FastAPI应用实例（最可能的直接原因）

你的server.py里没有创建FastAPI的核心应用实例，导致定义的@app.post("/api/data")路由根本没有被注册到服务中，请求自然找不到对应的POST方法，返回405错误。

修复代码：

from fastapi import FastAPI
from pydantic import BaseModel

# 必须添加这一行，创建FastAPI应用实例
app = FastAPI()

class directa(BaseModel):
    stdid: str
    stdpw: str
    stdmail: str
    countia: str
    celestia: str

# 多余的dataToSend模型可以删除，你并没有用到它
# class dataToSend(BaseModel):
#     dataToSend: str

@app.post("/api/data")
async def receive_data(directa_data: directa):
    print(directa_data)
    # 返回时不要直接用模型类，要返回接收的数据实例（转成字典）
    return {"message": "Data received", "data": directa_data.dict()}

2. 修复返回值错误

原代码中返回{"message": "Data received", "data": dataToSend}，这里的dataToSend是你定义的模型类而非实例，会导致FastAPI序列化失败。虽然这不是405的直接原因，但会引发后续服务错误，必须改成返回接收到的数据实例。

3. 跨域问题排查（若前后端端口不同）

如果前端网页运行在和后端不同的端口（比如前端3000、后端8000），浏览器的跨域限制可能间接导致请求异常。可以添加CORS中间件解决：

from fastapi.middleware.cors import CORSMiddleware

# 在创建app实例后添加
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境请替换为具体的前端域名，比如["http://localhost:3000"]
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

4. 路径一致性验证

确保前端请求的/api/data和后端路由路径完全一致，FastAPI对路径的斜杠、大小写敏感（比如/api/data和/api/data/是两个不同路径）。

测试验证 #

启动后端服务：

uvicorn server:app --reload

可以用curl先测试接口是否正常：

curl -X POST "http://localhost:8000/api/data" -H "Content-Type: application/json" -d '{"stdid":"123","stdpw":"456","stdmail":"test@example.com","countia":"789","celestia":"abc"}'

再运行前端代码发起请求，即可正常接收响应。

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