FastAPI 与前端交互

在这一篇中，你将学习 FastAPI 如何与前端页面交互，包括跨域配置（CORS）、请求响应格式、前端常见调用方式（如 Fetch 和 Axios）、以及返回 HTML 的方法。无论你是用 React、Vue 还是原生 JS，只要你使用 HTTP 请求，FastAPI 都能轻松对接。

前端如何调用 FastAPI 接口？

FastAPI 提供标准的 RESTful 接口，你可以通过前端的 fetch、axios、XMLHttpRequest 等方式调用。例如：

// 使用 Fetch 调用 FastAPI POST 接口
fetch("http://localhost:8000/items/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "前端商品",
    price: 12.5
  })
})
.then(response => response.json())
.then(data => console.log(data));

处理跨域请求（CORS）

不同端口或不同域名间的请求会触发浏览器的“跨域策略”，为了让前端页面能访问 FastAPI 接口，你需要添加 CORS 中间件。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 允许访问的来源地址（可用 "*" 开放所有，或指定域名）
origins = [
    "http://localhost:3000",  # React/Vue 本地服务
    "http://127.0.0.1:5500",  # 纯 HTML 静态页
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,             # 允许的来源
    allow_credentials=True,
    allow_methods=["*"],               # 允许所有方法
    allow_headers=["*"],               # 允许所有请求头
)

⚠️ 注意：allow_origins=["*"] 虽然开发中方便，但生产环境建议改为具体域名。除非是公共只读 API（如天气查询），否则应限制特定域名。

提示

跨域资源共享（CORS）是浏览器的一项安全机制 —— 当前端页面通过 JavaScript 向不同源的服务端发起请求时，是否被允许，是由服务端说了算。因此：

前端不需要也无法“配置 CORS”，前端只是发出请求，能不能被允许，是浏览器在请求返回后判断响应头来决定的。
CORS 是服务端的责任，也就是说，只需要在 FastAPI（或其他后端）中配置，前端就可以愉快访问了。

接受前端发送的数据

FastAPI 支持多种数据接收方式：

1. JSON 请求体

from pydantic import BaseModel
from fastapi import FastAPI

app = FastAPI()

class Item(BaseModel):
    name: str
    price: float

@app.post("/items/")
def create_item(item: Item):
    return {"message": "Item created", "item": item}

对应前端请求：

fetch("/items/", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "苹果", price: 3.5 })
});

2. 表单数据（Form）

from fastapi import Form

@app.post("/login")
def login(username: str = Form(...), password: str = Form(...)):
    return {"username": username}

对应 HTML 表单请求：

<form action="http://localhost:8000/login" method="post">
  <input name="username" />
  <input name="password" type="password" />
  <button type="submit">登录</button>
</form>

返回前端的数据格式

默认情况下，FastAPI 会返回 JSON 格式数据：

@app.get("/status")
def status():
    return {"status": "ok", "time": "2025-06-17"}

但如果需要，FastAPI 也可以返回 HTML 页面（适用于服务静态网页），例如：

from fastapi.responses import HTMLResponse

@app.get("/", response_class=HTMLResponse)
def index():
    return """
    <html>
      <body>
        <h1>Hello, Frontend</h1>
      </body>
    </html>
    """

或者通过 Jinja2 模板返回页面（推荐用于服务 SSR 页面）：

from fastapi import Request
from fastapi.templating import Jinja2Templates

templates = Jinja2Templates(directory="templates")

@app.get("/hello")
def hello(request: Request):
    return templates.TemplateResponse("hello.html", {"request": request, "name": "FastAPI"})

需安装 jinja2：

pip install jinja2

前后端协作建议

前端框架	常见请求方式	是否需要 CORS
Vue	Axios	是
React	Fetch / Axios	是
原生 JS	Fetch	是

📌 提示：

接口返回统一结构（如 { code, message, data }）更有利于前后端解耦。
推荐将后端接口统一挂载前缀，如 /api/v1。
可使用 .env 管理后端地址，避免前后硬编码。

小结

FastAPI 与前端的交互主要通过标准的 HTTP 接口完成，得益于 FastAPI 出色的类型支持和自动文档生成，你可以快速构建与前端配合的高效 API 服务。通过合理配置 CORS、中间件、统一响应格式等措施，你可以让前后端分离开发更顺畅、更专业。下一篇，我们将介绍如何为这些 API 添加认证与权限控制。

📝 作者：阿基米东

GetIoT.tech 创始人，独立开发者，Linux 重度用户，开源软件作者，创业者，INTJ

前端如何调用 FastAPI 接口？​

处理跨域请求（CORS）​

接受前端发送的数据​

1. JSON 请求体​

2. 表单数据（Form）​

返回前端的数据格式​

前后端协作建议​

小结​