Fastapi cookie non reçue par React Frontend: Resolution

Lors de l'utilisation de Fastapi comme backend et réagi comme le frontend communiqué via les demandes AJAX, les cookies définis par Fastapi peuvent ne pas être reçus 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 demande d'origine croisée. Vérifiez que la réponse inclut un «statut»: «succès» avec un code d'état de 200.

Activer l'acceptation des cookies dans React:
1. Configurez la demande Axios dans votre application React pour recevoir des cookies en définissant la propriété WithCredentials sur true. Ceci est nécessaire pour que les demandes d'origine transversale incluent des informations d'identification comme des cookies.
   par exemple, dans Axios:
attendre axios.post (url, données, {withCredentials: true}))

2. dans Fetch api: renfet ('https://example.com' });
   

   Spécifiez les origines autorisées dans fastapi:
   

   en raison de la nature d'origine croisée de la demande, vous devez explicitement spécifier les origines autorisées pour accéder à votre API. Cela inclut le domaine et le port de votre frontend React.

   
   

   Autoriser les informations d'identification dans Corsmiddleware:
3. dans votre application Fastapi, assurez-vous que le corsmiddleware est configuré avec allow_credentials défini sur true. Cela définit l'en-tête d'accès-contrôle-allow-crédentiels sur true, permettant aux informations d'identification d'être incluses dans les réponses des originaux. N'oubliez pas de vérifier soigneusement que le cookie est réglé correctement, sans aucune erreur renvoyée dans la demande de post axios.