Comment utiliser CORS pour autoriser la configuration des cookies

Question

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.

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.

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));
}
Il s'agit du contrôleur que j'utilise pour définir les cookies. 
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();
  }
});
 Fondamentalement, chaque réponse sur ce site revient à app.use(cors) mais pour une raison quelconque, cela ne fonctionne pas pour moi. 

Answer 1

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.

Answer 2

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.

const express = require("express");
require("dotenv").config();
const cors = require("cors");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const cookieParser = require("cookie-parser");
app.use(cookieParser());
const port = process.env.PORT || 8080;
const lib = require("./lib"); //这是所有自定义函数
const sql = require("./database");

onSubmit() {
        let loginInfo = {
          email: email.value,
          password: password.value,
        };
        axios
          .post("http://localhost:3000/user/login", loginInfo, {
            withCredentials: true,
          })
          .then(() =>
            $q.notify({
              color: "green-4",
              textColor: "white",
              icon: "cloud_done",
              message: "帐户创建成功！",
            })
          )
          .catch(() =>
            $q.notify({
              color: "red-5",
              textColor: "white",
              icon: "warning",
              message: "电子邮件或用户名已被使用！",
            })
          );
      },