So verwenden Sie CORS, um das Setzen von Cookies zu ermöglichen

Question

Ich habe mir andere verwandte Beiträge angesehen, aber keiner davon hat für mich funktioniert. Ich verwende Vue auf der Clientseite und Node auf der Serverseite.

Ich habe den in anderen Beiträgen vorgeschlagenen Ansatz mit der Cors-Bibliothek ausprobiert, ohne Erfolg. Man könnte meinen, dass der folgende Code es mir ermöglichen würde, Anfragen vom localhost:8080 des Clients an den localhost:3000 des Servers zu senden, aber alle Anfragen schlagen fehl.

const cors = require("cors");
if (process.env.ENV !== "prod") {
  let corsOptions = {
    Herkunft: ["http://localhost:8080"],
    Referenzen: wahr,
    OptionenErfolgsstatus: 200,
  };
  app.use(cors(corsOptions));
}

Dies ist der Controller, den ich zum Setzen von Cookies verwende.

router.route("/login").post(async (req, res) => {
  //Benutzer authentifizieren
  const user = waiting Users.findOne({ where: { email: req.body.email } });

  if (user == null) {
    return res.status(400).send("Benutzer nicht gefunden!");
  }
  versuchen {
    if (await bcrypt.compare(req.body.password, user.password)) {
      const userInfo = {
        Benutzername: user.username,
        E-Mail: user.email,
        Alter: user.age,
      };
      const accessToken = genericAccessToken(userInfo);

      const REFRESH_TOKEN_SECRET = jwt.sign(userInfo, process.env.REFRESH_TOKEN_SECRET);
      res.cookie("token", accessToken, {
        maxAlter: 300000,
        sicher: wahr,
        httpOnly: wahr,
        sameSite: „none“,
      });
      res.status(200).send("Anmeldung erfolgreich!");
    } anders {
      res.send("E-Mail-Adresse oder Passwort ist falsch!");
    }
  } fangen {
    res.status(500).send();
  }
});

Grundsätzlich greift jede Antwort auf dieser Website auf app.use(cors) zurück, aber aus irgendeinem Grund funktioniert das bei mir nicht.

Answer 1

这可能是因为对于跨域的cookie，您设置了{sameSite：true}和{secure：true}，但在您的示例中，您是在http://localhost上进行的，因此不会设置任何cookie。请参考以下链接以获取要求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#samesitenone_requires_secure

还要设置正确的头部，例如Access-Control-Allow-Credentials，Access-Control-Allow-Origin，Access-Control-Allow-Headers

您可以使用mkcert来参考在本地主机上进行安全连接。

我还建议在前端和后端使用相同的顶级域，并使用子域。

这里还要注意的一点是，如果域名中有端口，我认为Chrome不会设置cookie，请尝试一下。

Answer 2

我成功解决了这个问题，以便后来的人可以找到答案。我将cookieparser的声明移到了初始化sequelize连接的位置之前。我还在我的axios post请求中添加了withCredentials选项。通过这两个步骤，我的cookie现在都正确设置并且可以访问。

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: "电子邮件或用户名已被使用！",
            })
          );
      },