Problème selon lequel les cookies de session ne peuvent pas être enregistrés après le déploiement de l'application
P粉312631645
2023-08-29 09:37:44
<p>J'ai créé une application front-end à l'aide de React puis je l'ai déployée sur Netlify. L'application frontend interagit avec une application backend express que j'ai créée et déployée sur Render. Toute interaction entre le frontend et le backend est protégée par une authentification à l'aide de passeportjs. L'application backend utilise la politique locale du passeport pour vérifier que l'utilisateur existe/que le nom d'utilisateur et le mot de passe sont corrects en se connectant à mongoDB. Une fois confirmé, j'utilise les fonctions de sérialisation et de désérialisation du passeport pour maintenir la session de connexion. </p>
<p>Pendant le développement, j'utilise cette application sur http://localhost. En attendant, tout fonctionne comme prévu. La session de connexion est enregistrée sous forme de cookie, que je peux envoyer à l'application backend dans le cadre de futures demandes d'authentification de l'utilisateur. </p>
<p>Lorsque je déploie l'application frontend sur Netlify et l'application backend sur Render, le cookie de session n'est plus enregistré, ce qui signifie que l'utilisateur ne peut pas s'authentifier sur le backend car à chaque demande après la connexion, le cookie de session enregistré est envoyé au backend . </p>
<p>Plus en détail, pour qu'une session express soit utilisée avec passeport pour créer une session de connexion, j'utilise connect-mongo pour stocker la session sur MongoDB. Chaque fois que je me connecte via le frontend, je peux voir la session créée et stockée dans MongoDB. Le problème semble être que les cookies de la réponse ne sont pas ignorés et je ne sais pas pourquoi. </p>
<p>Voici mes options de session actuelles dans mon application backend express : </p>
<pre class="brush:php;toolbar:false;">app.use(
session({
secret : process.env.SESSION_SECRET,
sauvegarder : faux,
saveUninitialized : faux,
magasin : MongoStore.create({ mongoUrl : process.env.MONGODB_URI }),
biscuit: {
sécurisé : vrai,
mêmeSite : "aucun",
httpUniquement : vrai,
expire : 24 * 60*60*1000
}
})
);</pré>
<p>J'ai essayé de rechercher une solution et essayé de nombreuses options, notamment la modification de <code>secure</code>, la modification de <code>httpOnly</code>, la modification de <code>sameSite</code> false et aucun, ajoutez <code>domain</code> pointant vers l'URL du frontend et un autre <code>domain</code> cela ne semble pas avoir d'effet.</p>
<p>J'ai également défini l'en-tête de contrôle d'accès des informations d'identification sur true : </p>
<pre class="brush:php;toolbar:false;">app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", process.env.DOMAIN_URL);
res.setHeader("Access-Control-Allow-Credentials", true);
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
suivant();
});</pré>
<p>Pour toutes les requêtes, j'utilise <code>fetch</code>. J'ai rencontré une question similaire à la mienne, mais elle n'a pas reçu de réponse : le navigateur n'enregistre pas le cookie de session du serveur inter-domaines</p>
<p>Toute aide ou conseil est grandement apprécié ! </p>
Le problème a été résolu. Le problème est de faire confiance au proxy. Étant donné que j'utilise plusieurs serveurs de noms, le backend se trouve derrière un proxy inverse. En activant l'approbation du proxy, mon application backend comprendra qu'elle se trouve derrière un proxy et pourra faire confiance au champ d'en-tête X-Forwarded. Pour l'activer, j'ai ajouté le code suivant dans mon application backend :