history.pushstate und HTTP POST Formular repost

Question

Ich stehe derzeit ein kleines Problem mit HTTP-Post-Forms und Geschichte Pushstate.

Wenn mein Benutzer ein POST-Formular in example.com/page-1 sendet und dann auf einen Link auf dieser Seite klickt, werden sie mit einem history.pushstate an example.com/page-2 umgeleitet. Das JS-Skript ändert nur die aktuelle URL, schiebt das alte in den Verlauf und zeigt dann den neuen Inhalt an. Das funktioniert ganz gut für mich.

Das Problem: Sobald der Benutzer auf example.com/page-2 und aktualisiert die Seite manuell (ctrl + r oder Refresh-Button), Chromes fordert den Benutzer das Formular erneut vorzulegen; aber das Formular war tatsächlich in example.com/page-1 und es gibt keinen Grund, es auf dieser "neuen" Seite erneut zu fragen.

Gibt es eine Möglichkeit, alle zuvor in javascript übermittelten Daten in der Popstate-Änderung zu löschen, um die erneute Eingabeaufforderung vom Browser zu verhindern? Oder vermisse ich etwas mit meinen historischen Zuständen? Oder ist es etwas, das der Browser derzeit noch nicht implementiert?

Ich habe es nur mit Chrome getestet, da ich den Pushstate nicht mit anderen Browsern implementiere.

Answer 1

Vielleicht versuchen Sie replaceState stattdessen? Siehe this.

Die replaceState() Methode

history.replaceState() funktioniert genau wie history.pushState(), außer dass replaceState() modifiziert den aktuellen Historieneintrag statt einen neuen zu schaffen.

replaceState() ist besonders nützlich, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeraktion aktualisieren möchten.

Answer 2

Ich habe ein identisches Problem - ich verwende die History API mit BackboneJS. Die Lösung, an die ich gedacht habe, ist eine Zwischenseite, auf die das Formular nach der Anmeldung weitergeleitet wird. Der Zweck dieser Zwischenseite ist das Hinzufügen einer Seite ohne POST vor der Zielseite, so dass der Browser dies nicht tut Aufforderung, das Formular erneut zu senden (und für Chrome, keinen redundanten Eintrag hinzuzufügen).

Für Ihr Beispiel nach der POST-Form in example.com/page-1 Einreichung sollte der Server die Benutzer auf example.com/page-1a

example.com/page-1a umleiten kann überprüfen, ob die Anmeldeinformationen des Benutzers vorhanden sind, und dann zu example.com/page-2 umleiten. Das wird Ihr Problem lösen, glaube ich.

Für die Umleitung Mechanismus gibt es 3 Möglichkeiten, die ich mir vorstellen kann:

JavaScript (location.href="page-2")

HTML-Header (<meta http-equiv="refresh" content="0; URL='http://example.com/page-2'" />)

1. serverseitige

umleiten Persönlich habe ich die Optionen 1 und 2 ausprobiert - sie funktionieren gut für mich. Hoffe das hilft!