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

FastAPI : gestion des cookies dans React Frontend

Présentation

FastAPI permet la gestion des cookies pour le développement backend. Cependant, l'envoi et la réception de cookies dans les interfaces React peuvent nécessiter des configurations spécifiques pour garantir un bon fonctionnement.

Pourquoi les cookies ne sont pas renvoyés vers l'interface React

Si votre backend FastAPI ne renvoie pas de cookies à votre application React , plusieurs facteurs peuvent contribuer à ce problème :

1. Requête Axios invalide :

• Assurez-vous que votre requête Axios envoie correctement les informations d'identification en définissant la propriété withCredentials sur true.
• Vérifiez que l'URL de la requête Axios correspond au domaine de votre Back-end FastAPI. L'utilisation de localhost et 127.0.0.1 comme domaines différents peut perturber la création de cookies.

2. Restrictions CORS :

• En raison des requêtes d'origine croisée, vous devez configurer explicitement les paramètres CORS dans votre application FastAPI.
• Spécifiez les origines autorisées à l'aide du CORSMiddleware avec allow_credentials= True pour activer l'utilisation de cookies d'origine croisée.

3. Paramètres des cookies dans FastAPI :

• Assurez-vous que vous avez correctement défini les cookies dans vos routes FastAPI à l'aide de la méthode Response.set_cookie().
• Vérifiez que le paramètre httponly est défini sur True pour empêcher l'accès côté client aux cookies.

4. Attribut SameSite :

• L'attribut SameSite du cookie peut avoir un impact sur sa disponibilité dans différents domaines.
• Définissez-le sur SameSite=Lax ou SameSite=Strict pour contrôler l'accessibilité des cookies et empêcher les attaques intersites.

Exemple de cookie FastAPI Paramètre :

from fastapi import FastAPI, Response

app = FastAPI()

@app.get('/')
def main(response: Response):
    response.set_cookie(
        key='token',
        value='some-token-value', 
        httponly=True,
        samesite='Lax'  # or 'Strict'
    ) 
    return {'status': 'success'}

Exemple de demande Axios avec informations d'identification :

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

Remarque importante :

• N'oubliez pas que l'utilisation de caractères génériques (*) pour Access-Control-Allow-Origin peut limiter les types de communication et empêcher l'envoi de cookies et d'en-têtes d'autorisation.
• Assurez-vous que le domaine frontend est explicitement inclus dans les origines autorisées et que allow_credentials=True est défini pour une gestion appropriée 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!