Express バックエンドで CORS と Cookie-Parser を使用したサブドメイン Cookie の受信に問題が発生する

Question

現在 MERN (MongoDB、Express、React、Node.js) アプリケーションを開発していますが、Express バックエンドのサブドメインからの Cookie の受信で問題が発生しています。 CORS と Cookie 処理を設定しており、単純なローカルホストオリジンを使用する場合はすべて正常に動作しますが、サブドメインの処理に問題があります。

私が行った手順と直面した問題の概要は次のとおりです:

ログイン時に Cookie を設定します:

res.cookie("トークン", トークン, {
    httpOnly: true、
    同じサイト: "なし"、
    パス： "/"、
    安全: true、
  });

cors 設定を使用してこの Cookie を取得しようとすると、オリジンは次のようになります:

app.use(
  cors({
    発信元: "http://localhost:3000",
    資格情報: true、
  })
);

しかし、テストするときは、次のようにサブドメインの起点を使用します。

app.use(
  cors({
    発信元: "http://binbros.localhost:3000",
    資格情報: true、
  })
);

フロントエンドの CORS にエラーはなく、Cookie はフロントエンドで正常に作成されます。しかし、この CORS 設定を使用して Cookie にアクセスしようとすると、Cookie を受け取りません。ただし、同じ方法と単純なローカルホストへの CORS セットアップを使用すると、問題なくすべての Cookie を正常に取得できます。

console.log(req.cookies);

追記： 私がローカルホスト上にいて、オリジンがローカルホストである場合、 そしてクッキーをログに記録します バックエンドで作成したものだけでなく、すべてのフロントエンド Cookie を取得できます しかし サブドメインのオリジンにいるときは、バックエンドで Cookie さえ受信しません。 私が作成したものはなく、フロントエンドからのものもありません

Answer 1

subdomain.localhost などの開発環境でサブドメインを使用する場合、ブラウザーのセキュリティ ポリシーの制限により、追加の問題が発生する可能性があります。多くの場合、ブラウザーはさまざまなサブドメインを独立したオリジンとして扱うため、Cookie や CORS の動作に影響を与える可能性があります。

開発環境では、secure プロパティは false に設定するのが最適です。

リーリー

システムを確認してくださいhostsファイル:

リーリー

API が binbros.localhost ドメイン名から呼び出されているかどうかをフロントエンドで確認し、Access-Control-Allow-Credentials

を確認します。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials