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

React 不显示来自 FastAPI 后端的 POST 响应：解决 CORS 问题

在 React 中，您尝试从 HTTP 检索 JSON 数据向在不同端口上运行的 FastAPI 后端发出 POST 请求。但是，前端未按预期呈现响应。

了解 CORS

原因是跨域资源共享 (CORS)。 CORS 是一种安全机制，可限制浏览器向来自不同来源的资源（例如 JSON 数据）发送请求，这些来源由其协议、域和端口定义。在您的情况下，前端 (localhost:3000) 正在尝试从后端 (localhost:8000) 访问资源，这是一个不同的源。

在 FastAPI 中启用 CORS

要解决此问题，您需要在 FastAPI 应用程序中启用 CORS。这可以使用如下配置的 CORSMiddleware 来实现：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["YOUR_FRONTEND_ORIGIN"],
    allow_credentials=True,
    allow_methods=["*"],  # Allow all HTTP methods
    allow_headers=["*"],  # Allow all HTTP headers
)

将“YOUR_FRONTEND_ORIGIN”替换为 React 前端的来源，通常为“http://localhost:3000”。这将允许您的后端响应来自前端的 POST 请求，而不会出现 CORS 错误。

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