Warum setzt mein Browser keine Cookies von Cross-Origin-Antworten?

Browser weigert sich, Set-Cookie-Header aus Cross-Origin-Antwort zu berücksichtigen

Problem:

Eine Anwendung hat Schwierigkeiten, ein vom Backend an die Front gesendetes HTTP-Cookie zu setzen und beizubehalten Ende.

Besonderheiten:

• Das Backend sendet das Cookie korrekt im Antwortheader.
• Das Frontend verwendet Axios, um Anfragen zu senden , aber das Cookie wird nicht lokal gesetzt.
• Der API-Router verfügt über die erforderlichen Header und CORS-Einstellungen, um dies zuzulassen Cookies.

Lösung:

Der Fehler liegt in der Platzierung von withCredentials in der Axios-Anfragekonfiguration. withCredentials ist eine Eigenschaft der Anfrage, kein Anfrageheader. Um das Problem zu beheben, sollte es vom Header-Objekt in das Konfigurationsobjekt der obersten Ebene verschoben werden.

Korrigierter Code:

const axiosAuth = axios.create({
  validateStatus: (status: number) => {
    return status >= 200 && status < 300;
  },
  headers: {
    Accept: `application/json`,
    'Content-Type': 'application/json',
  },
  withCredentials: true,
});

Durch Verwendung von withCredentials: true Im Konfigurationsobjekt übernimmt Axios automatisch die Einstellung und den Abruf von Cross-Origin-Cookies.

Das obige ist der detaillierte Inhalt vonWarum setzt mein Browser keine Cookies von Cross-Origin-Antworten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!