Pourquoi mes cookies FastAPI n'atteignent-ils pas mon interface React ?

Problèmes de cookies FastAPI avec l'interface React

Problème

FastAPI ne renvoie pas les cookies à l'interface React, malgré l'exécution d'une requête POST et l'observation des cookie dans les en-têtes de réponse à l'aide de DevTools sur Chrome.

Solution

Pour résoudre le problème, suivez ces étapes :

1. Vérifier la demande Axios :

   Assurez-vous que la requête Axios POST est exécutée avec succès et ne renvoie aucune erreur. De plus, vérifiez que la réponse inclut « statut » : « succès » avec un code de statut 200.

2. Définir les informations d'identification dans la requête Axios :

   Étant donné que le frontend React et le backend FastAPI utilisent des ports différents, des requêtes d'origine croisée sont effectuées. Pour activer le transfert de cookies, définissez la propriété withCredentials sur true dans la requête Axios :

   await axios.post(url, data, {withCredentials: true}))

3. Autoriser les informations d'identification dans le middleware FastAPI :

   Pour les requêtes cross-origin, autorisez explicitement les informations d'identification dans le middleware FastAPI à l'aide de CORSMiddleware, paramètre allow_credentials=True. Cela définit l'en-tête de réponse Access-Control-Allow-Credentials sur true.

4. Spécifier les origines autorisées :

   Spécifier les origines autorisées à l'aide de ORIGINS, à l'exclusion du caractère générique *. Cela garantit que seuls des domaines spécifiques sont autorisés à envoyer des cookies.

5. Définir le cookie HTTPOnly :

   Dans le code FastAPI, définissez le paramètre httponly sur Vrai lors de la configuration du cookie. Cela empêche JavaScript d'accéder au cookie, améliorant ainsi la sécurité.

6. Configurez le middleware CORS :

   Ajoutez le CORSMiddleware à l'application FastAPI et configurez-le pour autoriser l'origine utilisée par l'interface React, autoriser les informations d'identification et autoriser toutes les méthodes et en-têtes.

7. Vérifiez les paramètres du navigateur (pour les tests Localhost uniquement) :

   Si vous accédez à l'interface React via localhost, assurez-vous que les requêtes Axios POST utilisent "localhost" au lieu de "127.0.0.1" dans l'URL, car ils sont considérés comme différents domaines.

En mettant en œuvre ces étapes, FastAPI renverra correctement les cookies au frontend React, permettant une communication sécurisée et authentifiée entre le frontend et le backend.

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!