為什麼我的 React 前端不顯示來自 FastAPI 後端的 POST 資料？

React 不顯示來自FastAPI 後端的POST 回應：CORS 故障排除

在此問題中，React 前端無法顯示從FastAPI 後端。問題在於CORS（跨域資源共享）限制，需要在FastAPI後端設定。

CORS和FastAPI

CORS是一種限制跨域請求的機制，例如從 React 前端到 FastAPI 後端的那些。這樣做是為了降低安全風險並保護用戶資料。若要啟用 CORS，您需要設定 FastAPI 應用程式以允許來自前端來源的請求。

在 FastAPI 中設定 CORS

在 FastAPI 中啟用 CORS 的建議方法之一是透過 CORSMiddleware。以下是一個範例：

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

app = FastAPI()

origins = ["http://localhost:3000", "http://127.0.0.1:3000"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

透過新增此中間件，您將允許來自指定來源（在本例中為 localhost:3000）的請求，並提供 cookie、方法和標頭的權限。

解決問題

要解決問題，請確保 FastAPI 後端已配置如上所示的 CORS。啟用 CORS 後，React 前端應該能夠與後端通訊並顯示從 POST 請求接收的資料。

以上是為什麼我的 React 前端不顯示來自 FastAPI 後端的 POST 資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！