Pourquoi mon frontend React ne reçoit-il pas les cookies de mon backend FastAPI ?

Cookie FastAPI non reçu par React Frontend : résolution

Lors de l'utilisation de FastAPI comme backend et de React comme frontend communiqués via des requêtes AJAX, les cookies défini par FastAPI peut ne pas être reçu par React. Ce comportement incohérent peut être attribué aux numéros de port distincts utilisés par les deux applications, ce qui crée un scénario de requête d'origine croisée.

Pour résoudre ce problème, plusieurs étapes sont nécessaires :

1. Définissez correctement les cookies dans FastAPI :
   Assurez-vous que les cookies sont créés et définis dans FastAPI sans erreurs. Vérifiez que la réponse inclut un « statut » : « succès » avec un code de statut 200.

2. Activez l'acceptation des cookies dans React :
   Configurez la requête Axios dans votre React app pour recevoir des cookies en définissant la propriété withCredentials sur true. Ceci est nécessaire pour que les demandes d'origine croisée incluent des informations d'identification telles que les cookies.

   Par exemple, dans Axios :
   await axios.post(url, data, {withCredentials: true}))

   Dans l'API Fetch :
   fetch('https://example.com', { informations d'identification : 'include' });

3. Spécifier les origines autorisées dans FastAPI :
   En raison de la nature d'origines croisées de la demande, vous devez spécifier explicitement les origines autorisées à accéder à votre API. Cela inclut le domaine et le port de votre interface React.
4. Autoriser les informations d'identification dans CORSMiddleware :
   Dans votre application FastAPI, assurez-vous que CORSMiddleware est configuré avec allow_credentials défini sur True. Cela définit l'en-tête Access-Control-Allow-Credentials sur true, permettant d'inclure les informations d'identification dans les réponses d'origine croisée.

En suivant ces étapes, FastAPI devrait renvoyer avec succès les cookies à votre interface React. N'oubliez pas de vérifier minutieusement que le cookie est correctement défini, aucune erreur n'est renvoyée dans la requête Axios 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!