Warum zeigt meine React-Benutzeroberfläche keine POST-Antwort von einem FastAPI-Backend an?

React-Benutzeroberfläche zeigt keine POST-Antwort vom FastAPI-Backend an

In diesem Szenario wird erwartet, dass eine React-Benutzeroberfläche eine JSON-Datei von einer FastAPI abruft Backend unter „localhost:8000/todo“ und präsentieren Sie die Daten als Teil der Benutzeroberfläche unter „localhost:3000“. Allerdings werden zwei Elemente aus der JSON-Datei („Ein Buch lesen.“ und „Mit dem Fahrrad durch die Stadt fahren“) nicht angezeigt.

Problemursache:

Das Problem liegt in der fehlenden CORS-Konfiguration (Cross-Origin Resource Sharing) im FastAPI-Backend. CORS ist ein Mechanismus, der es ermöglicht, Ressourcen von einem Ursprung mit Ressourcen von einem anderen Ursprung zu teilen, was in diesem Fall notwendig ist, da die React-Benutzeroberfläche und das FastAPI-Backend auf unterschiedlichen Domänen laufen.

Lösung:

Um CORS im FastAPI-Backend zu aktivieren, muss die CORSMiddleware konfiguriert werden. Mit dieser Middleware können Sie angeben, welche Ursprünge auf das Backend zugreifen dürfen, welche Methoden und Header zulässig sind und ob Anmeldeinformationen zulässig sind.

Beispielimplementierung:

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

In diesem Beispiel ist die CORSMiddleware so konfiguriert, dass sie Anfragen von den beiden Ursprüngen zulässt: „http://localhost:3000“ und „http://127.0.0.1:3000.“ Darüber hinaus werden alle Methoden und Header zugelassen und die gemeinsame Nutzung von Anmeldeinformationen ermöglicht.

Hinweis:

Es ist wichtig zu bedenken, dass sich Ursprünge auf eine Kombination aus Protokoll, Domäne und Port beziehen . Daher gelten selbst Localhost-URLs mit unterschiedlichen Ports als unterschiedliche Ursprünge und erfordern eine CORS-Konfiguration.

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