Warum kann mein FastAPI-Backend keine Cookies an mein React-Frontend senden?

FastAPI: Cookies können nicht an das React-Frontend zurückgegeben werden

Das Problem tritt auf, wenn FastAPI während der Kommunikation keine Cookies an ein React-Frontend zurücksenden kann.

Code:

Das Python-Snippet Unten zeigt den FastAPI-Code zum Setzen eines Cookies:

@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"}

Im React-Frontend verwenden Sie Axios, um die Anfrage zu senden:

await axios.post(login_url, formdata)

Fehlerbehebung:

1. Cookie bestätigen Erstellung:

   • Stellen Sie sicher, dass die Axios POST-Anfrage erfolgreich ist und eine „status“: „success“-Antwort mit einem 200-Statuscode zurückgibt.

2. Anmeldeinformationen in Axios aktivieren Anfrage:

   • Set withCredentials: true in Ihrer Axios-Anfrage, um den Empfang von Anmeldeinformationen, einschließlich Cookies, zu ermöglichen.

3. Konfigurieren Sie CORS :

   • Da Sie unterschiedliche Ports für FastAPI verwenden (Backend) und React (Frontend) aktivieren Sie CORS in FastAPI, um zulässige Ursprünge anzugeben. Legen Sie „allow_credentials=True“ fest, um das Senden und Empfangen von Anmeldeinformationen zuzulassen.

4. Zulässige Ursprünge angeben:

   • In Ihrer CORS-Konfiguration Geben Sie die zulässigen Ursprünge für Ihre Reaktion an Frontend.

Korrigierte Axios-Anfrage:

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

Zusätzliche Überlegungen:

• Gleiche Domäne: Stellen Sie sicher, dass sowohl das Backend als auch das Frontend verwenden dieselbe Domain. Die Verwendung von localhost und 127.0.0.1 als unterschiedliche Domänen verhindert die gemeinsame Nutzung von Cookies.
• Explizite Cookie-Einstellung: Die FastAPI-Funktion „response.set_cookie()“ setzt explizit Cookies für die Antwort.
• Anmeldeinformationen umfassen: Der Browser schließt Anmeldeinformationen in Cross-Origin-Anfragen ein, wenn credentials: 'include' wird in fetch() oder withCredentials: true in Axios angegeben.

Das obige ist der detaillierte Inhalt vonWarum kann mein FastAPI-Backend keine Cookies an mein React-Frontend senden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!