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

React zeigt keine POST-Antwort vom FastAPI-Backend an: Fehlerbehebung bei CORS

In diesem Problem ist ein React-Frontend nicht in der Lage, von einem gepostete Daten anzuzeigen FastAPI-Backend. Das Problem liegt in CORS-Einschränkungen (Cross-Origin Resource Sharing), die im FastAPI-Backend konfiguriert werden müssen.

CORS und FastAPI

CORS ist ein Mechanismus, der Cross-Origin-Anfragen einschränkt. beispielsweise von einem React-Frontend zu einem FastAPI-Backend. Dies geschieht, um Sicherheitsrisiken zu mindern und Benutzerdaten zu schützen. Um CORS zu aktivieren, müssen Sie die FastAPI-Anwendung so konfigurieren, dass Anfragen vom Frontend-Ursprung zugelassen werden.

CORS in FastAPI konfigurieren

Eine der empfohlenen Möglichkeiten, CORS in FastAPI zu aktivieren, ist die CORSMiddleware. Hier ist ein Beispiel:

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

Durch das Hinzufügen dieser Middleware erlauben Sie Anfragen von den angegebenen Ursprüngen (in diesem Fall localhost:3000) und erteilen Berechtigungen für Cookies, Methoden und Header.

Beheben des Problems

Um das Problem zu beheben, stellen Sie sicher, dass im FastAPI-Backend CORS wie oben gezeigt konfiguriert ist. Sobald CORS aktiviert ist, sollte das React-Frontend in der Lage sein, mit dem Backend zu kommunizieren und die von der POST-Anfrage empfangenen Daten anzuzeigen.

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