Warum empfängt mein React-Frontend keine Cookies von meinem FastAPI-Backend?

FastAPI-Cookie vom React-Frontend nicht empfangen: Lösung

Bei Verwendung von FastAPI als Backend und React als Frontend werden über AJAX-Anfragen kommuniziert, Cookies Der von FastAPI festgelegte Wert kann von React möglicherweise nicht empfangen werden. Dieses inkonsistente Verhalten kann auf die unterschiedlichen Portnummern zurückgeführt werden, die von beiden Anwendungen verwendet werden, wodurch ein Cross-Origin-Anforderungsszenario entsteht.

Um dieses Problem zu beheben, sind mehrere Schritte erforderlich:

1. Cookies in FastAPI richtig setzen:
   Stellen Sie sicher, dass Cookies in FastAPI fehlerfrei erstellt und gesetzt werden. Stellen Sie sicher, dass die Antwort einen „Status“ enthält: „Erfolg“ mit einem Statuscode 200.

2. Cookie-Akzeptanz in React aktivieren:
   Konfigurieren Sie die Axios-Anfrage in Ihrem React App, um Cookies zu empfangen, indem Sie die Eigenschaft „withCredentials“ auf „true“ setzen. Dies ist für ursprungsübergreifende Anfragen erforderlich, um Anmeldeinformationen wie Cookies einzuschließen.

   Zum Beispiel in Axios:
   await axios.post(url, data, {withCredentials: true}))

   In der Fetch-API:
   fetch('https://example.com', { credentials: 'include' });

3. Zulässige Ursprünge in FastAPI angeben:
   Aufgrund der ursprungsübergreifenden Natur der Anfrage müssen Sie explizit die Ursprünge angeben, die auf Ihre API zugreifen dürfen. Dazu gehören die Domäne und der Port Ihres React-Frontends.
4. Anmeldeinformationen in CORSMiddleware zulassen:
   Stellen Sie in Ihrer FastAPI-Anwendung sicher, dass CORSMiddleware mit „allow_credentials“ auf „True“ konfiguriert ist. Dadurch wird der Header „Access-Control-Allow-Credentials“ auf „true“ gesetzt, sodass Anmeldeinformationen in Cross-Origin-Antworten einbezogen werden können.

Wenn Sie diese Schritte ausführen, sollte FastAPI erfolgreich Cookies an Ihr React-Frontend zurückgeben. Denken Sie daran, gründlich zu überprüfen, ob das Cookie korrekt gesetzt ist und keine Fehler in der Axios POST-Anfrage zurückgegeben werden.

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