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

FastAPI ne peut pas envoyer de cookies à React Frontend

Présentation

FastAPI est un framework Python populaire pour la création d'API. Cependant, certains utilisateurs ont signalé des problèmes avec FastAPI qui ne renvoie pas les cookies aux applications frontales React.

Problème

Pourquoi FastAPI ne renvoie-t-il pas les cookies aux applications frontales React ?

Exemple de code

Voici un extrait de code illustrant le problème :

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)) -> dict:
    # Database operations omitted for brevity
    access_token = create_access_token(data={"sub": user.mobile_number})
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    return {"status": "success"}

Lors de l'envoi une demande de connexion de Swagger UI, le cookie apparaît dans les en-têtes de réponse. Cependant, depuis une application React, aucun cookie n'est renvoyé.

Solution

Il y a deux étapes pour résoudre ce problème :

1. Définir Cookies correctement :

   • Assurez-vous qu'il n'y a pas d'erreurs dans la requête FastAPI et qu'une réponse réussie est reçu.
   • Définissez correctement le cookie à l'aide de response.set_cookie(...).

2. Configurez CORS et les informations d'identification :

   • Autoriser les requêtes CORS en définissant les origines et allow_credentials=True dans le CORSMiddleware.
   • Dans l'application React, définissez withCredentials : true dans les requêtes Axios pour envoyer des cookies.

Explication

1. Cookie Paramètre :

   • Vérifiez que le cookie est correctement défini dans la réponse FastAPI. Assurez-vous que la clé, la valeur, http uniquement et les autres paramètres pertinents sont définis.

2. Partage de ressources inter-origines (CORS) :

   • Étant donné que React et FastAPI sont sur des ports différents, des requêtes CORS sont en cours.
   • Pour autoriser les cookies avec CORS, le serveur doit autoriser des origines spécifiques via les en-têtes de réponse Access-Control-Allow-Origin.
   • Dans FastAPI, utilisez CORSMiddleware avec allow_credentials=True.

3. Identifiants demandés :

   • Dans React, défini avecCredentials : true dans les requêtes Axios.
   • Cela informe le navigateur d'envoyer des cookies dans les requêtes ultérieures au serveur FastAPI.

Remarque importante

Spécifiez explicitement les origines autorisées pour empêcher tout accès non autorisé aux cookies. Par défaut, seuls certains types de communication sont autorisés dans les requêtes CORS sans informations d'identification, à l'exclusion des cookies.

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!