Comment utiliser CORS pour autoriser la configuration des cookies
P粉765684602
2023-08-29 17:26:51
<p>J'ai consulté d'autres articles connexes, mais aucun d'entre eux n'a fonctionné pour moi. J'utilise vue côté client et node côté serveur. </p>
<p>J'ai essayé l'approche suggérée dans d'autres articles en utilisant la bibliothèque cors sans succès.
On pourrait penser que le code suivant me permettrait d'envoyer des requêtes du localhost:8080 du client vers le localhost:3000 du serveur, mais toutes les requêtes échouent. </p>
<pre class="brush:php;toolbar:false;">const cors = require("cors");
if (process.env.ENV !== "prod") {
soit corsOptions = {
origine : ["http://localhost:8080"],
informations d'identification : vrai,
optionsSuccessStatus : 200,
} ;
app.use(cors(corsOptions));
}</pré>
<p>Il s'agit du contrôleur que j'utilise pour définir les cookies. </p>
<pre class="brush:php;toolbar:false;">router.route("/login").post(async (req, res) => {
//Authentifier les utilisateurs
const user = wait Users.findOne({ où : { email : req.body.email } });
si (utilisateur == null) {
return res.status(400).send("Utilisateur introuvable !");
}
essayer {
if (attendre bcrypt.compare(req.body.password, user.password)) {
const userInfo = {
nom d'utilisateur : utilisateur.nom d'utilisateur,
email : utilisateur.email,
âge : utilisateur.age,
} ;
const accessToken = generateAccessToken(userInfo);
const rafraîchirToken = jwt.sign(userInfo, process.env.REFRESH_TOKEN_SECRET);
res.cookie("jeton", accessToken, {
Âge maximum : 300 000,
sécurisé : vrai,
httpUniquement : vrai,
mêmeSite : "aucun",
});
res.status(200).send("Connexion réussie !");
} autre {
res.send("L'email ou le mot de passe est incorrect!");
}
} attraper {
res.status(500).send();
}
});</pré>
<p> Fondamentalement, chaque réponse sur ce site revient à app.use(cors) mais pour une raison quelconque, cela ne fonctionne pas pour moi. </p>
Cela peut être dû au fait que pour les cookies inter-domaines, vous définissez {sameSite : true} et {secure : true}, mais dans votre exemple, vous le faites sur http://localhost donc aucun cookie ne sera défini. Veuillez vous référer au lien ci-dessous pour connaître les exigences.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#samesitenone_requires_secure
Définissez également les en-têtes corrects tels que Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Headers
Vous pouvez utiliser mkcert pour faire référence à l'établissement d'une connexion sécurisée sur localhost.
Je recommande également d'utiliser le même domaine de premier niveau sur le frontend et le backend, et d'utiliser des sous-domaines.
Une autre chose à noter ici est que je ne pense pas que Chrome définira le cookie s'il y a un port dans le nom de domaine, veuillez l'essayer.
J'ai résolu ce problème avec succès afin que d'autres qui viendront plus tard puissent trouver la réponse. J'ai déplacé la déclaration de cookieparser juste avant l'endroit où la connexion séquelle est initialisée. J'ai également ajouté l'option withCredentials à ma demande de publication axios. Avec ces deux étapes, mes cookies sont désormais correctement paramétrés et accessibles.