Pourquoi mon navigateur ne configure-t-il pas de cookies à partir de réponses d'origines croisées ?

Le navigateur refuse d'honorer l'en-tête Set-Cookie de la réponse d'origine croisée

Problème :

Une application a du mal à définir et à conserver un cookie HTTP envoyé du backend au front-end.

Spécificités :

• Le backend envoie correctement le cookie dans l'en-tête de réponse.
• Le front-end utilise Axios pour envoyer des requêtes, mais le cookie n'est pas défini localement.
• Le routeur API dispose des en-têtes et des paramètres CORS nécessaires pour autoriser les cookies.

Résolution :

L'erreur réside dans le placement de withCredentials dans la configuration de la requête Axios. withCredentials est une propriété de la requête, pas un en-tête de requête. Pour résoudre le problème, il doit être déplacé de l'objet headers vers l'objet de configuration de niveau supérieur.

Code corrigé :

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

En utilisant withCredentials : true dans l'objet de configuration, Axios gérera automatiquement le paramétrage et la récupération des cookies d'origine croisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!