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

React n'affiche pas la réponse POST du backend FastAPI : dépannage de CORS

Dans ce problème, une interface React ne peut pas afficher les données POSTées à partir d'un Back-end FastAPI. Le problème réside dans les restrictions CORS (Cross-Origin Resource Sharing), qui doivent être configurées sur le backend FastAPI.

CORS et FastAPI

CORS est un mécanisme qui restreint les requêtes d'origine croisée, comme ceux d'une interface React à un backend FastAPI. Ceci est fait pour atténuer les risques de sécurité et protéger les données des utilisateurs. Pour activer CORS, vous devez configurer l'application FastAPI pour autoriser les requêtes provenant de l'origine du frontend.

Configuration de CORS dans FastAPI

L'une des méthodes recommandées pour activer CORS dans FastAPI consiste à utiliser CORSMiddleware. Voici un exemple :

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

En ajoutant ce middleware, vous autorisez les requêtes provenant des origines spécifiées (dans ce cas, localhost:3000) et fournissez des autorisations pour les cookies, les méthodes et les en-têtes.

Résoudre le problème

Pour résoudre le problème, assurez-vous que le backend FastAPI a configuré CORS comme indiqué ci-dessus. Une fois CORS activé, le frontend React devrait pouvoir communiquer avec le backend et afficher les données reçues de la requête POST.

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!