Warum zeigt mein React-Frontend keine POST-Antwort von meinem FastAPI-Backend an?

React zeigt keine POST-Antwort vom FastAPI-Backend an: Behebung des CORS-Problems

In React versuchen Sie, JSON-Daten von einem HTTP abzurufen POST-Anfrage an ein FastAPI-Backend, das auf einem anderen Port ausgeführt wird. Allerdings gibt das Frontend die Antwort nicht wie erwartet wieder.

Cors verstehen

Der Grund dafür ist Cross-Origin Resource Sharing (CORS). CORS ist ein Sicherheitsmechanismus, der Browser daran hindert, Anfragen an Ressourcen (z. B. JSON-Daten) unterschiedlicher Herkunft zu senden, die durch ihr Protokoll, ihre Domäne und ihren Port definiert sind. In Ihrem Fall versucht das Frontend (localhost:3000), vom Backend (localhost:8000) auf eine Ressource zuzugreifen, die einen anderen Ursprung hat.

CORS in FastAPI aktivieren

Um dieses Problem zu beheben, müssen Sie CORS in Ihrer FastAPI-Anwendung aktivieren. Dies kann mithilfe der CORSMiddleware erreicht werden, die wie folgt konfiguriert ist:

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
)

Ersetzen Sie „YOUR_FRONTEND_ORIGIN“ durch den Ursprung Ihres React-Frontends, normalerweise „http://localhost:3000“. Dadurch kann Ihr Backend ohne CORS-Fehler auf POST-Anfragen von Ihrem Frontend antworten.

Das obige ist der detaillierte Inhalt vonWarum zeigt mein React-Frontend keine POST-Antwort von meinem FastAPI-Backend an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!