
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"}
Nach dem Login kopieren
Im React-Frontend verwenden Sie Axios, um die Anfrage zu senden:
await axios.post(login_url, formdata)
Nach dem Login kopieren
Fehlerbehebung:
-
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.
-
Anmeldeinformationen in Axios aktivieren Anfrage:
- Set withCredentials: true in Ihrer Axios-Anfrage, um den Empfang von Anmeldeinformationen, einschließlich Cookies, zu ermöglichen.
-
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.
-
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})
Nach dem Login kopieren
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!