Heim  >  Artikel  >  Backend-Entwicklung  >  Warum zeigt meine React-App keine JSON-Daten von meinem FastAPI-Backend an?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-10 04:16:02150Durchsuche

Why Isn't My React App Displaying JSON Data from My FastAPI Backend?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn