为什么我的 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中文网其他相关文章！