Le backend Express a des problèmes pour recevoir les cookies de sous-domaine à l'aide de CORS et Cookie-Parser

Question

Je développe actuellement une application MERN (MongoDB, Express, React, Node.js) et je rencontre un problème avec la réception des cookies d'un sous-domaine dans le backend Express. J'ai configuré CORS et la gestion des cookies et tout fonctionne bien lorsque j'utilise une simple origine localhost, mais j'ai du mal à gérer les sous-domaines.

Voici un résumé des mesures que j'ai prises et des problèmes auxquels j'ai été confronté :

Définir un cookie lors de la connexion :

res.cookie("token", jeton, {
    httpUniquement : vrai,
    mêmeSite : "aucun",
    chemin: "/",
    sécurisé : vrai,
  });
Lorsque j'essaie d'obtenir ce cookie en utilisant les paramètres cors, dont l'origine est : 
app.use(
  cors({
    origine : "http://localhost:3000",
    informations d'identification : vrai,
  })
);
Mais lors des tests, lorsque j'utilise l'origine du sous-domaine, comme ceci : 
app.use(
  cors({
    origine : "http://binbros.localhost:3000",
    informations d'identification : vrai,
  })
);
Il n'y a aucune erreur avec CORS sur le frontend et le cookie est créé avec succès sur le frontend. Mais lorsque j'essaie d'accéder aux cookies en utilisant ce paramètre CORS, je ne reçois aucun cookie. Mais en utilisant la même méthode et la même configuration CORS sur un simple hôte local, je peux obtenir tous les cookies normalement sans aucun problème. 
console.log(req.cookies);
P.S :
Quand je suis sur localhost et que origin est localhost,
et j'enregistre le cookie,
Je peux récupérer tous les cookies du frontend, pas seulement celui que j'ai créé dans le backend
mais
Quand je suis sur l'origine du sous-domaine, je ne reçois même pas de cookie sur le backend,
Aucun créé par moi, ni aucun depuis le frontend
            

Answer 1

Lorsque vous utilisez des sous-domaines dans un environnement de développement tel que subdomain.localhost, vous pouvez rencontrer des défis supplémentaires en raison des restrictions de la politique de sécurité du navigateur. Les navigateurs traitent souvent différents sous-domaines comme des origines indépendantes, ce qui peut affecter le comportement des cookies et CORS.

Dans un environnement de développement, il est préférable de définir l'attribut secure sur false.

res.cookie("token", token, {
    httpOnly: true,
    sameSite: "none",
    path: "/",
    secure: false,
  });

Vérifiez votre systèmehostsfichier :

127.0.0.1 binbros.localhost

Vérifiez sur le frontend si l'API est appelée à partir du nom de domaine binbros.localhost et vérifiez Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials