Cara menggunakan CORS untuk membenarkan kuki ditetapkan

Question

Saya telah melihat siaran lain yang berkaitan tetapi tiada satu pun daripada mereka yang berkesan untuk saya. Saya menggunakan vue pada bahagian klien dan nod pada bahagian pelayan.

Saya mencuba pendekatan yang dicadangkan dalam siaran lain menggunakan perpustakaan cors tanpa berjaya. Seseorang mungkin berfikir bahawa kod berikut akan membolehkan saya menghantar permintaan daripada localhost:8080 klien ke localhost:3000 pelayan, tetapi semua permintaan gagal.

const cors = require("cors");
if (process.env.ENV !== "prod") {
  biarkan corsOptions = {
    asal: ["http://localhost:8080"],
    kelayakan: benar,
    optionsSuccessStatus: 200,
  };
  app.use(cors(corsOptions));
}

Ini ialah pengawal yang saya gunakan untuk menetapkan kuki.

router.route("/login").post(async (req, res) => {
  //Sahkan pengguna
  pengguna const = tunggu Users.findOne({ where: { email: req.body.email } });

  if (pengguna == null) {
    return res.status(400).send("Pengguna tidak ditemui!");
  }
  cuba {
    if (menunggu bcrypt.compare(req.body.password, user.password)) {
      const userInfo = {
        nama pengguna: pengguna.nama pengguna,
        e-mel: pengguna.e-mel,
        umur: pengguna.umur,
      };
      const accessToken = generateAccessToken(userInfo);

      const refreshToken = jwt.sign(userInfo, process.env.REFRESH_TOKEN_SECRET);
      res.cookie("token", accessToken, {
        maxUmur: 300000,
        selamat: benar,
        httpSahaja: benar,
        sameSite: "tiada",
      });
      res.status(200).send("Log masuk berjaya!");
    } lain {
      res.send("E-mel atau kata laluan tidak betul!");
    }
  } tangkap {
    res.status(500).send();
  }
});

Pada asasnya setiap jawapan di tapak ini kembali kepada app.use(cors) tetapi atas sebab tertentu ia tidak berfungsi untuk saya.

Answer 1

Ini mungkin kerana untuk kuki merentas domain anda menetapkan {sameSite: true} dan {secure: true}, tetapi dalam contoh anda, anda melakukannya di http://localhost jadi tiada kuki yang akan ditetapkan. Sila rujuk pautan di bawah untuk keperluan.

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

Tetapkan juga pengepala yang betul seperti Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Access-Control-Allow-Headers

Anda boleh menggunakan mkcert untuk merujuk kepada membuat sambungan selamat pada localhost.

Saya juga mengesyorkan menggunakan domain peringkat atas yang sama pada bahagian hadapan dan belakang serta menggunakan subdomain.

Satu lagi perkara yang perlu diperhatikan di sini ialah saya tidak fikir Chrome akan menetapkan kuki jika terdapat port dalam nama domain, sila cuba.

Answer 2

Saya berjaya menyelesaikan masalah ini supaya orang lain yang datang kemudian dapat mencari jawapannya. Saya mengalihkan pengisytiharan cookieparser sebelum ini di mana sambungan sekuel dimulakan. Saya juga menambahkan pilihan withCredentials pada permintaan pos axios saya. Dengan kedua-dua langkah, kuki saya kini ditetapkan dengan betul dan boleh diakses.

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