Warum sendet mein FastAPI-Backend keine Cookies an mein React-Frontend?

FastAPI kann keine Cookies an React Frontend senden

Übersicht

FastAPI ist ein beliebtes Python-Framework zum Erstellen von APIs. Einige Benutzer haben jedoch Probleme damit gemeldet, dass FastAPI keine Cookies an React-Frontend-Anwendungen zurückgibt.

Problem

Warum gibt FastAPI keine Cookies an React-Frontend-Anwendungen zurück?

Codebeispiel

Hier ist ein Codeausschnitt, der das Problem veranschaulicht:

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)) -> dict:
    # Database operations omitted for brevity
    access_token = create_access_token(data={"sub": user.mobile_number})
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    return {"status": "success"}

Beim Senden eines Logins Bei einer Anfrage von Swagger UI erscheint das Cookie in den Antwortheadern. Von einer React-App wird jedoch kein Cookie zurückgegeben.

Lösung

Es gibt zwei Schritte, um dieses Problem zu beheben:

1. Einstellen Cookies richtig:

   • Stellen Sie sicher, dass die FastAPI-Anfrage keine Fehler enthält und eine Erfolgsantwort erfolgt erhalten.
   • Setzen Sie das Cookie mithilfe von „response.set_cookie(...)“ korrekt ein.

2. Konfigurieren Sie CORS und Anmeldeinformationen:

   • Erlauben Sie CORS-Anfragen, indem Sie „Ursprünge“ und „allow_credentials=True“ festlegen CORSMiddleware.
   • In der React-App mitCredentials: true in Axios-Anfragen zum Senden von Cookies festlegen.

Erklärung

1. Keks Einstellung:

   • Stellen Sie sicher, dass das Cookie in der FastAPI-Antwort korrekt gesetzt ist. Stellen Sie sicher, dass der richtige Schlüssel, Wert, httponly und andere relevante Parameter festgelegt sind.

2. Cross-Origin Resource Sharing (CORS):

   • Da sich React und FastAPI auf unterschiedlichen Ports befinden, werden CORS-Anfragen gestellt.
   • Um Cookies zuzulassen mit CORS, der Server muss bestimmte Ursprünge über Access-Control-Allow-Origin-Antwortheader zulassen.
   • Verwenden Sie in FastAPI CORSMiddleware mitallow_credentials=True.

3. Beantragte Anmeldeinformationen:

   • In Reagieren Sie, setzen Sie withCredentials: true in Axios-Anfragen.
   • Dies informiert den Browser, Cookies in nachfolgenden Anfragen an den FastAPI-Server zu senden.

Wichtiger Hinweis

Geben Sie explizit die zulässigen Ursprünge an, um unbefugten Zugriff auf Cookies zu verhindern. Standardmäßig sind in CORS-Anfragen ohne Anmeldeinformationen nur bestimmte Kommunikationstypen zulässig, ausgenommen Cookies.

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