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

React 不顯示來自FastAPI 後端的POST 回應：解決CORS 問題

在React 中，您嘗試從HTTP 檢索不同連接埠上執行的FastAPI 後端發出POST 請求。但是，前端未按預期呈現回應。

了解 CORS

原因是跨域資源共享 (CORS)。 CORS 是一種安全機制，可限制瀏覽器向來自不同來源的資源（例如 JSON 資料）發送請求，這些來源由其協定、網域和連接埠定義。在您的情況下，前端 (localhost:3000) 正在嘗試從後端 (localhost:8000) 存取資源，這是一個不同的來源。

在 FastAPI 中啟用 CORS

要解決此問題，您需要在 FastAPI 應用程式中啟用 CORS。這可以使用以下配置的 CORSMiddleware 來實現：

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

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["YOUR_FRONTEND_ORIGIN"],
    allow_credentials=True,
    allow_methods=["*"],  # Allow all HTTP methods
    allow_headers=["*"],  # Allow all HTTP headers
)

將「YOUR_FRONTEND_ORIGIN」替換為 React 前端的來源，通常為「http://localhost:3000」。這將允許您的後端回應來自前端的 POST 請求，而不會出現 CORS 錯誤。

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