为什么我的 React 应用程序不显示来自 FastAPI 后端的 JSON 数据？

React 应用程序不显示来自 FastAPI 后端的 JSON 数据

问题

React 应用程序无法显示从本地主机的 FastAPI 后端获取的 JSON 数据： 8000/待办事项。数据已收到，但未在 React UI 中呈现。

原因

此问题是由 FastAPI 后端中缺少跨源资源共享 (CORS) 配置引起的。默认情况下，浏览器会限制跨域请求以防止安全风险。

解决方案

要解决此问题，必须在 FastAPI 应用程序中启用 CORS。这可以使用 CORSMiddleware 来实现。

示例

以下代码演示了如何在 FastAPI 应用程序中启用 CORS：

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）。它还允许在请求中包含 cookie (allow_credentials=True)，并且不限制 HTTP 方法或标头 (allow_methods=["*"]、allow_headers=["*"])。

其他信息

• CORS Headers：CORS 中间件控件设置的 HTTP 标头浏览器如何处理跨域请求。例如，Access-Control-Allow-Origin 标头指定允许的请求来源。
• Origin：Origin 指请求的协议、域和端口。来自不同来源的请求被视为跨域请求。
• 同源策略：默认情况下，浏览器强制执行同源策略，该策略限制跨域请求以防止安全漏洞。 CORS 提供了一种放宽此政策的方法。

以上是为什么我的 React 应用程序不显示来自 FastAPI 后端的 JSON 数据？的详细内容。更多信息请关注PHP中文网其他相关文章！