現在 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 さえ受信しません。 私が作成したものはなく、フロントエンドからのものもありません
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