CORS を使用して Cookie の設定を許可する方法

Question

他の関連投稿も見ましたが、どれもうまくいきませんでした。私はクライアント側で vue を使用し、サーバー側でノードを使用します。

cors ライブラリを使用して、他の投稿で提案されているアプローチを試しましたが、成功しませんでした。 次のコードを使用すると、クライアントの localhost:8080 からサーバーの localhost:3000 にリクエストを送信できると思う人もいるかもしれませんが、すべてのリクエストは失敗します。

const cors = require("cors");
if (プロセス.env.ENV !== "本番") {
  let corsOptions = {
    発信元: ["http://localhost:8080"]、
    資格情報: true、
    オプション成功ステータス: 200、
  };
  app.use(cors(corsOptions));
}

これは Cookie を設定するために使用するコントローラーです。

router.route("/login").post(async (req, res) => {
  // ユーザーを認証する
  const user = await Users.findOne({ ここで: { email: req.body.email } });

  if (ユーザー == null) {
    return res.status(400).send("ユーザーが見つかりません!");
  }
  試す {
    if (await bcrypt.compare(req.body.password, user.password)) {
      const userInfo = {
        ユーザー名: ユーザー.ユーザー名、
        電子メール: user.email、
        年齢: ユーザーの年齢、
      };
      const accessToken =generateAccessToken(userInfo);

      const freshToken = jwt.sign(userInfo, process.env.REFRESH_TOKEN_SECRET);
      res.cookie("トークン", accessToken, {
        maxAge: 300000、
        安全: true、
        httpOnly: true、
        同じサイト: "なし"、
      });
      res.status(200).send("ログイン成功!");
    } それ以外 {
      res.send("メールアドレスまたはパスワードが間違っています!");
    }
  } キャッチ {
    res.status(500).send();
  }
});

基本的にこのサイトのすべての答えは app.use(cors) に戻りますが、何らかの理由でそれは私にとっては機能しません。

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 を使用して、ローカルホスト上で安全な接続を確立することを参照できます。

また、フロントエンドとバックエンドの両方で同じトップレベル ドメインを使用し、サブドメインを使用することをお勧めします。

ここでもう 1 つ注意すべき点は、ドメイン名にポートがある場合、Chrome は Cookie を設定しないと思います。試してみてください。

Answer 2

この問題は無事に解決できたので、後で来る人が答えを見つけられるようになります。 cookieparser の宣言を、Sequelize 接続が初期化される直前に移動しました。また、withCredentials オプションを axios 投稿リクエストに追加しました。両方の手順を実行すると、Cookie が正しく設定され、アクセスできるようになりました。

リーリー リーリー