FastAPI+CORS：解決跨域問題的快速方案

什麼是跨域問題？¶

當我們用前端代碼（比如網頁的JavaScript）去請求另一個不同域名、端口或協議的後端接口時，瀏覽器會因爲安全策略（同源策略）自動攔截這個請求，這就是“跨域問題”。

舉個例子：
- 前端頁面部署在 http://localhost:3000（假設是一個Vue/React項目）。
- 後端API運行在 http://localhost:8000（FastAPI服務）。
- 前端代碼用 fetch 或 axios 請求後端接口時，瀏覽器會報錯“跨域請求被阻止”。

爲什麼FastAPI默認會有跨域問題？¶

FastAPI 本身不會自動處理跨域請求，當前端請求與後端“不同源”時，瀏覽器會拒絕響應。這是瀏覽器的安全機制，防止惡意網站獲取其他網站的數據。

如何用CORS解決跨域問題？¶

解決跨域的核心是在後端添加 CORS（跨域資源共享）中間件，告訴瀏覽器“哪些前端域名可以訪問我的接口”。FastAPI 通過 CORSMiddleware 實現這一點。

步驟1：安裝依賴（FastAPI自帶，無需額外安裝）¶

FastAPI 已內置 CORSMiddleware，只需導入即可使用。

步驟2：配置CORS中間件¶

在FastAPI應用中添加CORS中間件，允許指定的前端域名、請求方法和請求頭訪問後端接口。

代碼示例：¶

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

app = FastAPI()

# 添加CORS中間件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 允許所有前端域名（開發環境用，生產環境需指定具體域名）
    allow_credentials=True,  # 是否允許攜帶cookies
    allow_methods=["*"],  # 允許所有請求方法（GET, POST等）
    allow_headers=["*"],  # 允許所有請求頭
)

# 定義一個測試接口
@app.get("/api/hello")
async def read_hello():
    return {"message": "Hello, CORS!"}

關鍵參數解釋¶

注意事項¶

1. 生產環境避免用["*"]：
   allow_origins=["*"] 允許所有域名訪問，存在安全風險。生產環境需指定具體域名，例如：

   allow_origins=["https://your-frontend.com"]  # 只允許該域名

2. allow_credentials=True時，allow_origins不能用["*"]：
   若前端請求攜帶cookies（如登錄態），allow_origins必須明確指定域名，且allow_credentials=True。

前端請求示例¶

假設前端用 JavaScript 的 fetch 調用後端接口，配置CORS後即可正常請求：

// 前端代碼（可放在HTML中或單獨JS文件）
async function fetchData() {
  try {
    const response = await fetch("http://localhost:8000/api/hello");
    const data = await response.json();
    console.log("後端返回的數據：", data);
  } catch (error) {
    console.error("跨域請求失敗：", error);
  }
}

fetchData();

結果：若後端CORS配置正確，前端控制檯會打印 {"message": "Hello, CORS!"}，無跨域錯誤。

總結¶

跨域問題本質是瀏覽器的安全限制，FastAPI通過 CORSMiddleware 快速解決。只需簡單配置 allow_origins、allow_methods 等參數，即可讓前端順利請求後端接口。開發時可用 ["*"] 快速測試，生產環境需嚴格限制域名和方法，確保安全。

通過以上步驟，你已掌握FastAPI解決跨域的核心方法，可直接應用到項目中！