Pourquoi mon backend FastAPI ne peut-il pas envoyer de cookies à mon frontend React ?

FastAPI : impossible de renvoyer les cookies à l'interface React

Le problème survient lorsque FastAPI ne parvient pas à renvoyer les cookies à une interface React pendant la communication.

Code :

Le Python L'extrait ci-dessous montre le code FastAPI pour définir un cookie :

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)):
    # code to authenticate and generate access token
    
    # set cookie
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    
    return {"status": "success"}

Dans l'interface React, vous utilisez Axios pour envoyer la demande :

await axios.post(login_url, formdata)

Dépannage :

1. Confirmer le cookie Création :

   • Assurez-vous que la requête Axios POST est réussie et renvoie un 'statut' : réponse 'succès' avec un code d'état 200.

2. Activer les informations d'identification dans Axios Requête :

   • Définissez withCredentials : true dans votre requête Axios pour autoriser la réception d'informations d'identification, y compris les cookies.

3. Configurer CORS :

   • Puisque vous utilisez différents ports pour FastAPI (backend) et React (frontend), activez CORS dans FastAPI pour spécifier les origines autorisées. Définissez allow_credentials=True pour autoriser l'envoi et la réception d'informations d'identification.

4. Spécifiez les origines autorisées :

   • Dans votre configuration CORS, spécifier les origines autorisées pour votre React frontend.

Demande Axios corrigée :

await axios.post(login_url, formdata, {withCredentials: true})

Considérations supplémentaires :

• Même domaine : Assurez-vous que le backend et le frontend utilise le même domaine. L'utilisation de localhost et 127.0.0.1 comme domaines différents empêchera le partage de cookies.
• Paramètre explicite des cookies : La fonction FastAPI Response.set_cookie() définit explicitement les cookies sur la réponse.
• Les informations d'identification incluent : Le navigateur inclut les informations d'identification dans les requêtes d'origine croisée lorsque les informations d'identification : « inclure » sont spécifiées dans fetch() ou withCredentials : true dans Axios.

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!