Pourquoi mon navigateur ne stocke-t-il pas les cookies définis par mon serveur Go dans une application React ?

Le navigateur refuse de stocker le cookie

Énoncé du problème

Dans une application React intégrée à un serveur Go, le serveur tente de définir un cookie pendant le réponse de connexion. Cependant, le cookie n'est pas enregistré par le navigateur, bien qu'il soit renvoyé dans la réponse de l'onglet réseau.

Exploration

Les extraits de code fournis indiquent que :

• Le partage de ressources d'origine croisée (CORS) est configuré pour autoriser les informations d'identification.

• La fonction http.SetCookie() est utilisée pour ajouter le cookie à la réponse avec les paramètres suivants :

  • Nom : "accessToken"
  • Valeur : token
  • Âge maximum : spécifié sous forme d'entier
  • Chemin : "/api"
  • HTTP uniquement : true
  • SameSite : LaxMode

Les captures d'écran de l'onglet réseau montrent que le cookie est bien renvoyé dans les en-têtes de réponse.

Solution

La clé pour résoudre ce problème réside dans l'indicateur d'informations d'identification de l'API Fetch. Lors d'une requête de récupération qui anticipe un cookie dans la réponse, il est essentiel de définir les identifiants : "include".

Code modifié :

fetch(`${url}/login`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    credentials: "include", // This line has been added
    body: JSON.stringify({
        email: userDetails.email,
        password: userDetails.password,
    }),
}).then((response) => { ...

En définissant les identifiants sur "include", le navigateur comprend qu'il doit accepter et stocker le cookie inclus dans la réponse. Cette configuration garantit que le navigateur enregistre correctement le cookie et le rend disponible pour les requêtes ultérieures.

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!