アプリケーションデプロイ後にセッションCookieが保存できない問題

Question

React を使用してフロントエンド アプリケーションを作成し、Netlify にデプロイしました。フロントエンド アプリケーションは、私が作成して Render にデプロイした高速バックエンド アプリケーションと対話します。フロントエンドとバックエンド間のやり取りは、passportjs を使用した認証によって保護されます。バックエンド アプリケーションは、パスポートのローカル ポリシーを使用して、mongoDB に接続することでユーザーが存在すること、ユーザー名とパスワードが正しいことを確認します。確認したら、パスポートのシリアル化および逆シリアル化機能を使用してログイン セッションを維持します。

開発中、私はこのアプリケーションを http://localhost で使用します。その間、すべてが期待どおりに機能します。ログイン セッションは Cookie として保存され、今後のユーザー認証リクエストの一部としてバックエンド アプリケーションに送信できます。

フロントエンド アプリを Netlify にデプロイし、バックエンド アプリを Render にデプロイすると、セッション Cookie が保存されなくなります。これは、ユーザーがログイン後のすべてのリクエストとしてバックエンドで認証できないことを意味します。保存されたセッション Cookie はバックエンドに送信されます。

もう少し詳しく説明すると、パスポートを使用した Express-session でログイン セッションを作成するには、connect-mongo を使用してセッションを MongoDB に保存します。フロントエンド経由でログインするたびに、セッションが作成され、MongoDB に保存されていることがわかります。問題は、応答内の Cookie が渡されないことのようですが、その理由はわかりません。

これは、Express バックエンド アプリケーションに現在設定されているセッション オプションです。

app.use(
  セッション（{
    シークレット: process.env.SESSION_SECRET、
    保存: false、
    saveUninitialized: false、
    ストア: MongoStore.create({ mongoUrl: process.env.MONGODB_URI })、
    クッキー： {
      安全: true、
      同じサイト: "なし"、
      httpOnly: true、
      有効期限: 24 * 60*60*1000
    }
  })
);

解決策を探して、secureの変更、httpOnlyの変更、sameSiteの変更など、多くのオプションを試しました。 false および none の場合、フロントエンド URL を指す domain とバックエンド URL を指す別の domain を追加し、ヘルメットやレート リミッターなど、インストールしたセキュリティ パッケージをすべて削除します。効果はないようです。

資格情報の Access Control ヘッダーも true に設定します。

app.use((req, res, next) => {
  res.setHeader("アクセス制御-許可オリジン", process.env.DOMAIN_URL);
  res.setHeader("アクセス制御-許可資格情報", true);
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.header("アクセス制御の許可メソッド", "GET、PUT、POST、DELETE");
  次（）;
});

すべてのリクエストに対して、fetch を使用します。私と同様の質問に遭遇しましたが、回答はありませんでした: ブラウザがクロスドメイン サーバーからセッション Cookie を保存しない

助けやアドバイスをいただければ幸いです。

Answer 1

＃＃＃問題が解決しました。問題はプロキシを信頼することにあります。複数のネームサーバーを実行しているため、バックエンドはリバース プロキシの背後にあります。プロキシの信頼を有効にすると、バックエンド アプリケーションはプロキシの背後にあることを認識し、X-Forwarded-header フィールドを信頼できるようになります。これを有効にするために、バックエンド アプリケーションに次のコードを追加しました。 リーリー