Warum zeigt meine React-App keine JSON-Daten von meinem FastAPI-Backend an?

React-Anwendung zeigt keine JSON-Daten vom FastAPI-Backend an

Problem

Eine React-Anwendung zeigt keine JSON-Daten an, die von einem FastAPI-Backend bei localhost abgerufen wurden: 8000/todo. Die Daten werden empfangen, aber nicht in der React-Benutzeroberfläche gerendert.

Ursache

Dieses Problem wird durch eine fehlende CORS-Konfiguration (Cross-Origin Resource Sharing) im FastAPI-Backend verursacht. Standardmäßig beschränken Browser ursprungsübergreifende Anfragen, um Sicherheitsrisiken vorzubeugen.

Lösung

Um dieses Problem zu beheben, muss CORS in der FastAPI-Anwendung aktiviert sein. Dies kann mit der CORSMiddleware erreicht werden.

Beispiel

Der folgende Code zeigt, wie CORS in einer FastAPI-Anwendung aktiviert wird:

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

Erklärung

Die CORSMiddleware ermöglicht ursprungsübergreifende Anfragen von den angegebenen Ursprüngen (http://localhost:3000 und http://127.0.0.1:3000 in diesem Beispiel). Es ermöglicht auch die Aufnahme von Cookies in die Anfrage (allow_credentials=True) und schränkt HTTP-Methoden oder Header nicht ein (allow_methods=["*"],allow_headers=["*"]).

Zusätzliche Informationen

• CORS-Header: Die von der CORS-Middleware festgelegten HTTP-Header steuern, wie der Browser funktioniert verarbeitet ursprungsübergreifende Anfragen. Beispielsweise gibt der Header „Access-Control-Allow-Origin“ die zulässigen Ursprünge für eine Anfrage an.
• Origin: Origin bezieht sich auf das Protokoll, die Domäne und den Port einer Anfrage. Anfragen unterschiedlicher Herkunft werden als Cross-Origin-Anfragen betrachtet.
• Same-Origin-Richtlinie: Standardmäßig erzwingen Browser die Same-Origin-Richtlinie, die Cross-Origin-Anfragen einschränkt, um Sicherheitslücken zu vermeiden. CORS bietet eine Möglichkeit, diese Richtlinie zu lockern.

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