Problem, dass Sitzungscookies nach der Anwendungsbereitstellung nicht gespeichert werden können

Question

Ich habe mit React eine Front-End-Anwendung erstellt und sie dann auf Netlify bereitgestellt. Die Frontend-Anwendung interagiert mit einer Express-Backend-Anwendung, die ich erstellt und für Render bereitgestellt habe. Jede Interaktion zwischen Frontend und Backend wird durch die Authentifizierung mithilfe von Passportjs geschützt. Die Backend-Anwendung verwendet die lokale Richtlinie von Passport, um zu überprüfen, ob der Benutzer existiert bzw. ob Benutzername und Passwort korrekt sind, indem sie eine Verbindung zu mongoDB herstellt. Nach der Bestätigung verwende ich die Serialisierungs- und Deserialisierungsfunktionen von Passport, um die Anmeldesitzung aufrechtzuerhalten.

Während der Entwicklung verwende ich diese Anwendung unter http://localhost. In der Zwischenzeit funktioniert alles wie erwartet. Die Anmeldesitzung wird als Cookie gespeichert, das ich im Rahmen zukünftiger Anfragen zur Authentifizierung des Benutzers an die Backend-Anwendung senden kann.

Wenn ich die Frontend-App auf Netlify und die Backend-App auf Render bereitstelle, wird das Sitzungscookie nicht mehr gespeichert, was bedeutet, dass sich der Benutzer nicht am Backend authentifizieren kann, da bei jeder Anfrage nach der Anmeldung das gespeicherte Sitzungscookie an das Backend gesendet wird .

Um etwas detaillierter zu sein: Damit Express-Session mit Passport verwendet werden kann, um eine Anmeldesitzung zu erstellen, verwende ich connect-mongo, um die Sitzung auf MongoDB zu speichern. Jedes Mal, wenn ich mich über das Frontend anmelde, kann ich sehen, wie die Sitzung erstellt und in MongoDB gespeichert wird. Das Problem scheint zu sein, dass die Cookies in der Antwort nicht übergangen werden und ich weiß nicht warum.

Hier sind meine aktuellen Sitzungsoptionen in meiner Express-Backend-Anwendung:

app.use(
  Sitzung({
    Geheimnis: process.env.SESSION_SECRET,
    speichern: falsch,
    saveUninitialized: false,
    speichern: MongoStore.create({ mongoUrl: process.env.MONGODB_URI }),
    Cookie: {
      sicher: wahr,
      sameSite: "none",
      httpOnly: wahr,
      Ablaufdatum: 24 * 60 * 60 * 1000
    }
  })
);

Ich habe nach einer Lösung gesucht und viele Optionen ausprobiert, einschließlich der Änderung von secure, der Änderung von httpOnly und der Änderung von sameSite false und none, fügen Sie domain hinzu, das auf die Frontend-URL verweist, und eine weitere domain, die auf die Backend-URL verweist, entfernen Sie alle Sicherheitspakete, die ich installiert habe, wie Helm und Ratenbegrenzer, aber es scheint keine Wirkung zu haben.

Ich habe auch den Access Control-Header der Anmeldeinformationen auf „true“ gesetzt:

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", process.env.DOMAIN_URL);
  res.setHeader("Access-Control-Allow-Credentials", true);
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
  nächste();
});

Für alle Anfragen verwende ich fetch. Ich bin auf eine ähnliche Frage wie meine gestoßen, die jedoch nicht beantwortet wurde: Browser speichert kein Sitzungscookie vom domänenübergreifenden Server

Jede Hilfe oder jeder Rat ist uns sehr willkommen!

Answer 1

问题已解决。问题出在信任代理上。由于我正在运行多个域名服务器，后端位于反向代理之后。通过启用信任代理，我的后端应用程序将了解到它位于代理之后，并且可以信任X-Forwarded-头字段。为了启用它，我在后端应用程序中添加了以下代码：

app.set("trust proxy", 1);