Warum werden meine FastAPI-Cookies nicht in meinem React-Frontend angezeigt?

FastAPI: Umgang mit Cookies im React Frontend

Übersicht

FastAPI ermöglicht den Umgang mit Cookies für die Backend-Entwicklung. Das Senden und Empfangen von Cookies in React-Frontends erfordert jedoch möglicherweise bestimmte Konfigurationen, um die ordnungsgemäße Funktionalität sicherzustellen.

Warum Cookies nicht an das React-Frontend zurückgegeben werden

Wenn Ihr FastAPI-Backend keine Cookies an Ihre React-App zurückgibt , mehrere Faktoren können zu diesem Problem beitragen:

1. Ungültige Axios-Anfrage:

• Stellen Sie sicher, dass Ihre Axios-Anfrage Anmeldeinformationen korrekt sendet, indem Sie die Eigenschaft „withCredentials“ auf „true“ setzen.
• Stellen Sie sicher, dass die Axios-Anfrage-URL mit Ihrer Domäne übereinstimmt FastAPI-Backend. Die Verwendung von localhost und 127.0.0.1 als unterschiedliche Domänen kann die Cookie-Erstellung stören.

2. CORS-Einschränkungen:

• Aufgrund ursprungsübergreifender Anfragen müssen Sie CORS-Einstellungen in Ihrer FastAPI-Anwendung explizit konfigurieren.
• Geben Sie die zulässigen Ursprünge mithilfe der CORSMiddleware mit „allow_credentials=“ an True, um die Verwendung von Cross-Origin-Cookies zu ermöglichen.

3. Cookie-Einstellungen in FastAPI:

• Stellen Sie sicher, dass Sie Cookies in Ihren FastAPI-Routen mithilfe der Methode „response.set_cookie()“ korrekt setzen.
• Stellen Sie sicher, dass der Parameter „httponly“ auf eingestellt ist True, um den clientseitigen Zugriff auf Cookies zu verhindern.

4. SameSite-Attribut:

• Das SameSite-Attribut des Cookies kann sich auf seine Verfügbarkeit in verschiedenen Domänen auswirken.
• Setzen Sie es auf SameSite=Lax oder SameSite=Strict, um die Cookie-Zugänglichkeit zu steuern und Verhindern Sie standortübergreifende Angriffe.

Beispiel für ein FastAPI-Cookie Einstellung:

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'}

Beispiel-Axios-Anfrage mit Anmeldeinformationen:

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

Wichtiger Hinweis:

• Denken Sie daran, dass die Verwendung von Platzhaltern (*) für Access-Control-Allow-Origin die Kommunikationsarten und einschränken kann Verhindern Sie das Senden von Cookies und Autorisierungsheadern.
• Stellen Sie sicher, dass die Frontend-Domäne explizit in den zulässigen Ursprüngen enthalten ist und dass „allow_credentials=True“ für eine ordnungsgemäße Cookie-Verarbeitung festgelegt ist.

Das obige ist der detaillierte Inhalt vonWarum werden meine FastAPI-Cookies nicht in meinem React-Frontend angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!