Warum kann ich keine Cookies aus einer Cross-Origin-API-Antwort setzen?

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!