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

Warum FastAPI keine Cookies an das React-Frontend zurückgibt

Wenn Sie versuchen, Cookies von einem FastAPI-Backend innerhalb eines React-Frontends abzurufen, stellen Sie möglicherweise fest, dass dies nicht der Fall ist tatsächlich die erwarteten Cookies in der Antwort erhalten. Mehrere Faktoren tragen zu diesem Verhalten bei, wie z. B. die ordnungsgemäße Erstellung von Cookies, die Konfiguration der Übertragung von Anmeldeinformationen und die korrekte Einrichtung von CORS (Cross-Origin Resource Sharing).

Korrektes Setzen von Cookies

Standardmäßig tut FastAPI dies Cookies werden in der Antwort nicht automatisch zurückgegeben. Um ein Cookie zu setzen, müssen Sie explizit die Funktion „set_cookie()“ des Antwortobjekts aufrufen und den Schlüssel, den Wert und alle zusätzlichen Optionen (z. B. „max_age“ oder „expires“) angeben. Stellen Sie sicher, dass während der Axios POST-Anfrage keine Fehler auftreten und Sie eine erfolgreiche Antwort mit dem Statuscode 200 erhalten.

Anmeldeinformationsübertragung

Damit Ihr React-Frontend Cookies empfängt, müssen Sie Sie müssen die Übertragung von Anmeldeinformationen in Ihren Axios-Anfragen aktivieren. Indem Sie die Eigenschaft „withCredentials“ auf „true“ setzen, erlauben Sie Ihrer Anfrage, Anmeldeinformationen wie Cookies und Autorisierungsheader zu senden und zu empfangen. Diese Eigenschaft sollte in jeder Anfrage enthalten sein, bei der Sie Anmeldeinformationen vom Server erwarten.

Außerdem muss die CORS-Konfiguration für CORS-Anfragen (wenn Ihr Frontend und Backend unterschiedliche Domänen oder Ports verwenden) die Übertragung von Anmeldeinformationen explizit zulassen . Dies kann erreicht werden, indem die Option „allow_credentials“ in der CORSMiddleware auf „True“ gesetzt wird.

CORS-Konfiguration

CORS-Einstellungen spielen eine entscheidende Rolle dabei, ursprungsübergreifende Anfragen zuzulassen und die Cookie-Übertragung zwischen Frontend und Backend zu ermöglichen . Stellen Sie sicher, dass für Ihre FastAPI-Anwendung die CORS-Middleware konfiguriert ist und dass die Liste „allow_origins“ den Ursprung Ihres React-Frontends enthält.

Richtige Axios-Konfiguration

Die Axios-Anfrage sollte die Option „withCredentials“ enthalten, die auf „true“ gesetzt ist:
await axios.post(url, data, { withCredentials: true })

Alternativ, wenn Sie die Fetch-API verwenden:
fetch('https://example.com', { credentials: 'include' })

Wenn Sie diese Schritte befolgen, können Sie kann erfolgreich Cookies zwischen Ihrem FastAPI-Backend und dem React-Frontend setzen und abrufen, was eine authentifizierte Benutzerverwaltung und Zugriffskontrolle ermöglicht.

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!