为什么我的 React 前端不显示来自 FastAPI 后端的 POST 数据？

React 不显示来自 FastAPI 后端的 POST 响应：CORS 故障排除

在此问题中，React 前端无法显示从FastAPI 后端。问题在于CORS（跨域资源共享）限制，需要在FastAPI后端配置。

CORS和FastAPI

CORS是一种限制跨域请求的机制，例如从 React 前端到 FastAPI 后端的那些。这样做是为了降低安全风险并保护用户数据。要启用 CORS，您需要配置 FastAPI 应用程序以允许来自前端源的请求。

在 FastAPI 中配置 CORS

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

通过添加此中间件，您将允许来自指定来源（在本例中为 localhost:3000）的请求，并提供 cookie、方法和标头的权限。

解决问题

要解决问题，请确保 FastAPI 后端已配置如上所示的 CORS。启用 CORS 后，React 前端应该能够与后端通信并显示从 POST 请求接收到的数据。

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