Pourquoi mon interface utilisateur React n'affiche-t-elle pas la réponse POST d'un backend FastAPI ?

L'interface utilisateur de React n'affiche pas la réponse POST du backend FastAPI

Dans ce scénario, une interface utilisateur de React est censée récupérer un fichier JSON à partir d'une API rapide backend sur « localhost : 8000/todo » et présentez les données dans le cadre de l'interface utilisateur sur « localhost : 3000 ». Cependant, deux éléments du fichier JSON (« Lire un livre. » et « Faire du vélo en ville. ») ne s'affichent pas.

Cause première du problème :

Le problème réside dans le manque de configuration CORS (Cross-Origin Resource Sharing) dans le backend FastAPI. CORS est un mécanisme qui permet de partager des ressources d'une origine avec des ressources d'une autre origine, ce qui est nécessaire dans ce cas car l'interface utilisateur React et le backend FastAPI s'exécutent sur des domaines différents.

Solution :

Pour activer CORS dans le backend FastAPI, le CORSMiddleware doit être configuré. Ce middleware permet de spécifier les origines autorisées à accéder au backend, les méthodes et en-têtes autorisés, et si les informations d'identification sont autorisées.

Exemple de mise en œuvre :

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

Dans cet exemple, CORSMiddleware est configuré pour autoriser les requêtes provenant des deux origines : « http://localhost:3000 » et « http://127.0.0.1:3000 ». De plus, il autorise toutes les méthodes et tous les en-têtes et permet le partage d'informations d'identification.

Remarque :

Il est important de se rappeler que les origines font référence à une combinaison de protocole, de domaine et de port. . Par conséquent, même les URL localhost avec des ports différents sont considérées comme des origines différentes et nécessitent une configuration 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!