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

React UI 不顯示來自FastAPI 後端的POST 回應

在這種情況下，React UI 預計會從FastAPI 取得JSON 檔案後端位於“localhost:8000/todo”，並將資料作為UI 的一部分呈現在“localhost:3000”處。但是，JSON 文件中的兩項（“閱讀一本書。”和“在城裡騎自行車。”）未顯示。

問題根本原因：

問題在於 FastAPI 後端缺少跨域資源共享 (CORS) 配置。 CORS 是一種允許一個來源的資源與另一個來源的資源共享的機制，在這種情況下這是必要的，因為 React UI 和 FastAPI 後端運行在不同的域上。

解決方案：

要在 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=["*"],
)

在此範例中，CORSMiddleware 設定為允許來自兩個來源的請求：「http://localhost:3000」和「http://127.0.0.1:3000。」此外，它允許所有方法和標頭並啟用憑證共用。

注意：

請務必記住，起源是指協定、網域和連接埠的組合。因此，即使具有不同連接埠的 localhost URL 也被視為不同的來源，並且需要 CORS 設定。

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