Cross-Origin-HTTP-Cookie-Management: Beheben von Header-Problemen
In der Webentwicklung kann das Setzen und Abrufen von HTTP-Cookies aus einer Cross-Origin-Antwort erfolgen eine Herausforderung sein. Diese Situation tritt auf, wenn eine Front-End-Anwendung mit einer Back-End-API kommuniziert, die von einer anderen Domäne bereitgestellt wird.
Das Problem ist auf die Same-Origin-Richtlinie zurückzuführen, die von modernen Browsern durchgesetzt wird und den Zugriff auf Ressourcen einschränkt verschiedene Ursprünge. Wenn eine Cross-Origin-Anfrage gestellt wird, weigert sich der Browser normalerweise, den Set-Cookie-Header in der Antwort zu berücksichtigen, wodurch verhindert wird, dass das Cookie lokal gespeichert wird.
Szenario
Betrachten Sie diesen speziellen Fall, in dem eine Front-End-Anwendung zu Authentifizierungszwecken ein Aktualisierungstoken festlegen muss. Die Back-End-API sendet den Set-Cookie-Header wie erwartet, aber das Front-End kann ihn nicht empfangen und speichern.
Axios Request Configuration
Der Code Die zum Senden von Anfragen vom Frontend bereitgestellte Option enthält die Eigenschaft „withCredentials“ im Header-Objekt. Dies ist nicht der richtige Standort für diese Immobilie. withCredentials sollte als Eigenschaft der Axios-Instanz selbst und nicht als Header festgelegt werden.
// Incorrect (Sets withCredentials as a request header)
const axiosAuth = axios.create({
...
headers: {
withCredentials: true,
},
...
});// Correct (Sets withCredentials as a property of the instance)
const axiosAuth = axios.create({
...
withCredentials: true,
...
});Lösung
Durch die Umstellung von withCredentials auf eine Eigenschaft Da es sich nicht um einen Header der Axios-Instanz handelt, berücksichtigt der Browser ordnungsgemäß den Set-Cookie-Header aus der Cross-Origin-Antwort und speichert das Cookie lokal. Dadurch kann die Front-End-Anwendung das Cookie anschließend bei nachfolgenden Anfragen zu Authentifizierungszwecken an die API senden.
Das obige ist der detaillierte Inhalt vonWarum kann ich keine Cookies aus einer Cross-Origin-API-Antwort setzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
