為什麼我的 React 應用程式不顯示來自 FastAPI 後端的 JSON 資料？

React 應用程式不顯示來自FastAPI 後端的JSON 資料

問題

React 應用程式無法顯示從本地主機的FastAPI 主機後端取得的JSON 資料： 8000/待辦事項。資料已收到，但未在 React UI 中呈現。

原因

此問題是由 FastAPI 後端中缺少跨來源資源共享 (CORS) 配置引起的。預設情況下，瀏覽器會限制跨網域請求以防止安全性風險。

解決方案

要解決此問題，必須在 FastAPI 應用程式中啟用 CORS。這可以使用 CORSMiddleware 來實現。

範例

以下程式碼示範如何在FastAPI 應用程式中啟用CORS：

說明

CORSMiddleware 允許來自指定來源的跨來源請求（本例為http://localhost:3000 和http://127.0.0.1:3000）。它還允許在請求中包含 cookie (allow_credentials=True)，並且不限制 HTTP 方法或標頭 (allow_methods=["*"]、allow_headers=["*"])。

其他資訊

• CORS Headers：CORS 中介軟體設定的 HTTP 標頭控制瀏覽器如何處理跨域請求。例如，Access-Control-Allow-Origin 標頭指定允許的請求來源。
• Origin：Origin 指請求的協定、域和連接埠。來自不同來源的請求被視為跨域請求。
• 同源策略：預設情況下，瀏覽器強制執行同源策略，該策略限制跨域請求以防止安全漏洞。 CORS 提供了一種放寬此政策的方法。

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