Pourquoi mon backend FastAPI n'envoie-t-il pas de cookies à mon frontend React ?

Pourquoi FastAPI ne renvoie pas les cookies à l'interface React

Lorsque vous essayez de récupérer les cookies d'un backend FastAPI dans une interface React, vous constaterez peut-être que vous ne l'êtes pas recevoir effectivement les cookies attendus dans la réponse. Plusieurs facteurs contribuent à ce comportement, tels que la création appropriée de cookies, la configuration de la transmission des informations d'identification et la configuration correcte du CORS (Cross-Origin Resource Sharing).

Configuration correcte des cookies

Par défaut, FastAPI le fait ne renvoie pas automatiquement les cookies dans la réponse. Pour définir un cookie, vous devez appeler explicitement la fonction set_cookie() de l'objet de réponse et spécifier la clé, la valeur et toutes les options supplémentaires (telles que max_age ou expires). Assurez-vous qu'il n'y a pas d'erreurs lors de la requête Axios POST et que vous recevez une réponse réussie avec un code d'état de 200.

Transmission des informations d'identification

Pour que votre interface React reçoive des cookies, vous devez activer la transmission des informations d’identification dans vos requêtes Axios. En définissant la propriété withCredentials sur true, vous autorisez votre demande à envoyer et à recevoir des informations d'identification, telles que des cookies et des en-têtes d'autorisation. Cette propriété doit être incluse dans chaque requête pour laquelle vous prévoyez recevoir des informations d'identification du serveur.

De plus, pour les requêtes CORS (lorsque votre frontend et votre backend utilisent des domaines ou des ports différents), la configuration CORS doit explicitement autoriser la transmission des informations d'identification. . Ceci peut être réalisé en définissant l'option allow_credentials sur True dans CORSMiddleware.

Configuration CORS

Les paramètres CORS jouent un rôle crucial en autorisant les requêtes d'origine croisée et en permettant la transmission de cookies entre le frontend et le backend. . Assurez-vous que votre application FastAPI dispose d'un middleware CORS configuré et que la liste Allow_origins inclut l'origine de votre interface React.

Configuration Axios appropriée

La requête Axios doit inclure l'option withCredentials définie sur true :
attendez axios.post(url, data, { withCredentials : true })

Alternativement, si vous utilisez l'API Fetch :
fetch('https://example.com', { credentials: 'include' })

En suivant ces étapes, vous peut définir et récupérer avec succès des cookies entre votre backend FastAPI et votre frontend React, permettant une gestion des utilisateurs authentifiés et un contrôle d'accès.

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!