Pourquoi mon frontend React n'affiche-t-il pas la réponse POST de mon backend FastAPI ?

React n'affiche pas la réponse POST du backend FastAPI : résolution du problème CORS

Dans React, vous essayez de récupérer des données JSON à partir d'un HTTP Requête POST vers un backend FastAPI exécuté sur un port différent. Cependant, le frontend ne rend pas la réponse comme prévu.

Comprendre CORS

La raison en est le partage de ressources d'origine croisée (CORS). CORS est un mécanisme de sécurité qui empêche les navigateurs d'envoyer des requêtes à des ressources (telles que des données JSON) provenant de différentes origines, définies par leur protocole, leur domaine et leur port. Dans votre cas, le frontend (localhost:3000) tente d'accéder à une ressource depuis le backend (localhost:8000), qui est d'une origine différente.

Activation de CORS dans FastAPI

Pour résoudre ce problème, vous devez activer CORS dans votre application FastAPI. Ceci peut être réalisé en utilisant le CORSMiddleware configuré comme suit :

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["YOUR_FRONTEND_ORIGIN"],
    allow_credentials=True,
    allow_methods=["*"],  # Allow all HTTP methods
    allow_headers=["*"],  # Allow all HTTP headers
)

Remplacez "YOUR_FRONTEND_ORIGIN" par l'origine de votre interface React, généralement "http://localhost:3000". Cela permettra à votre backend de répondre aux requêtes POST de votre frontend sans erreurs CORS.

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!