Pourquoi ne puis-je pas définir de cookies à partir d'une réponse API multi-origine ?

Gestion des cookies HTTP d'origine croisée : résolution des problèmes d'en-tête

Dans le développement Web, la définition et la récupération de cookies HTTP à partir d'une réponse d'origine croisée peuvent être un défi. Cette situation se produit lorsqu'une application frontale communique avec une API back-end servie à partir d'un domaine différent.

Le problème provient de la politique de même origine appliquée par les navigateurs modernes, qui restreint l'accès aux ressources de origines différentes. Lorsqu'une requête d'origine croisée est effectuée, le navigateur refuse généralement d'honorer l'en-tête Set-Cookie dans la réponse, empêchant ainsi le stockage local du cookie.

Scénario

Considérez ce cas spécifique où une application frontale doit définir un jeton d'actualisation à des fins d'authentification. L'API back-end envoie l'en-tête Set-Cookie comme prévu, mais le front-end ne parvient pas à le recevoir et à l'enregistrer.

Configuration de la demande Axios

Le code fourni pour l'envoi de requêtes depuis le front-end inclut la propriété withCredentials dans l'objet headers. Ce n'est pas le bon emplacement pour cette propriété. withCredentials doit être défini comme une propriété de l'instance axios elle-même, plutôt que comme un en-tête.

// 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,
  ...
});

Solution

En déplaçant withCredentials pour devenir une propriété de l'instance axios, plutôt qu'un en-tête, le navigateur honorera correctement l'en-tête Set-Cookie de la réponse d'origine croisée et stockera le cookie localement. Cela permet à l'application frontale d'envoyer ultérieurement le cookie à l'API lors de demandes ultérieures à des fins d'authentification.

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!