Pourquoi mon application React n'affiche-t-elle pas les données JSON de mon backend FastAPI ?

L'application React n'affiche pas les données JSON du backend FastAPI

Problème

Une application React ne parvient pas à afficher les données JSON récupérées à partir d'un backend FastAPI sur localhost : 8000/tout. Les données sont reçues mais ne sont pas restituées dans l'interface utilisateur de React.

Cause

Ce problème est dû à un manque de configuration du partage de ressources cross-origine (CORS) dans le backend FastAPI. Par défaut, les navigateurs limitent les requêtes cross-origin pour éviter les risques de sécurité.

Solution

Pour résoudre ce problème, CORS doit être activé dans l'application FastAPI. Ceci peut être réalisé à l'aide de CORSMiddleware.

Exemple

Le code suivant montre comment activer CORS dans une application FastAPI :

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

Explication

Le CORSMiddleware autorise les requêtes multi-origines à partir des origines spécifiées (http://localhost:3000 et http://127.0.0.1:3000 dans cet exemple). Il permet également d'inclure des cookies dans la requête (allow_credentials=True) et ne restreint pas les méthodes ou les en-têtes HTTP (allow_methods=["*"], allow_headers=["*"]).

Informations supplémentaires

• En-têtes CORS : les en-têtes HTTP définis par le middleware CORS contrôlent la manière dont le navigateur gère les requêtes d’origine croisée. Par exemple, l'en-tête Access-Control-Allow-Origin spécifie les origines autorisées pour une requête.
• Origin : L'origine fait référence au protocole, au domaine et au port d'une requête. Les requêtes provenant d'origines différentes sont considérées comme des requêtes d'origine croisée.
• Politique de même origine : par défaut, les navigateurs appliquent la stratégie de même origine, qui restreint les requêtes d'origine croisée pour éviter les failles de sécurité. CORS offre un moyen d'assouplir cette politique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!