Warum erreichen meine FastAPI-Cookies nicht mein React-Frontend?

FastAPI-Cookie-Probleme mit dem React-Frontend

Problem

FastAPI gibt keine Cookies an das React-Frontend zurück, obwohl eine POST-Anfrage ausgeführt und das beobachtet wurde Cookie in den Antwortheadern mithilfe von DevTools Chrome.

Lösung

Um das Problem zu beheben, folgen Sie diesen Schritten:

1. Axios-Anfrage überprüfen:

   Stellen Sie sicher, dass die Axios POST-Anfrage erfolgreich ausgeführt wird und keine Fehler zurückgibt. Überprüfen Sie außerdem, ob die Antwort „status“: „success“ mit einem 200-Statuscode enthält.

2. Anmeldeinformationen in Axios-Anfrage festlegen:

   Da das React-Frontend und das FastAPI-Backend unterschiedliche Ports verwenden, werden ursprungsübergreifende Anfragen gestellt. Um die Cookie-Übertragung zu aktivieren, setzen Sie die Eigenschaft withCredentials in der Axios-Anfrage auf true:

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

3. Anmeldeinformationen in FastAPI Middleware zulassen:

   Für Cross-Origin-Anfragen erlauben Sie explizit die Verwendung von Anmeldeinformationen in der FastAPI-Middleware CORSMiddleware, Einstellungallow_credentials=True. Dadurch wird der Antwortheader „Access-Control-Allow-Credentials“ auf true gesetzt.

4. Zulässige Ursprünge angeben:

   Angeben die zulässigen Ursprünge unter Verwendung von ORIGINS, mit Ausnahme des Platzhalters *. Dadurch wird sichergestellt, dass nur bestimmte Domänen Cookies senden dürfen.

5. Cookie HTTPOnly setzen:

   Setzen Sie im FastAPI-Code den Parameter httponly auf True beim Setzen des Cookies. Dies verhindert, dass JavaScript auf das Cookie zugreift, was die Sicherheit erhöht.

6. CORS-Middleware konfigurieren:

   CORS-Middleware zur FastAPI-App hinzufügen und konfigurieren Erlauben Sie den vom React-Frontend verwendeten Ursprung, erlauben Sie Anmeldeinformationen und erlauben Sie alle Methoden und Header.

7. Überprüfen Sie die Browsereinstellungen (nur für Localhost-Tests):

   Wenn Sie über localhost auf das React-Frontend zugreifen, stellen Sie sicher, dass Axios POST-Anfragen verwendet werden „localhost“ anstelle von „127.0.0.1“ in der URL, da diese als unterschiedlich gelten Domänen.

Durch die Implementierung dieser Schritte gibt FastAPI Cookies korrekt an das React-Frontend zurück und ermöglicht so eine sichere und authentifizierte Kommunikation zwischen Frontend und Backend.

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