如何防止history.pushState()和HTTP POST表单导致页面刷新时重新发布？

Question

我目前面临 HTTP post 表单和历史推送状态的一个小问题。

当我的用户在

example.com/page-1

中提交 POST 表单，然后单击此页面中的链接时，他们将被重定向到带有 History.pushstate 的

example.com/page-2

。 JS 脚本只是更改当前的 url，将旧的内容推送到历史记录，然后显示新的内容。这对我来说非常有效。

问题：一旦用户打开

example.com/page-2

并手动刷新页面（ctrl+r或刷新按钮），Chromes会提示用户再次提交表单；但表格实际上在

example.com/page-1

中，没有理由在这个“新”页面中再次询问。

有没有办法在 popstate 更改时清除 javascript 中所有先前提交的数据，以防止浏览器重新发布提示？或者我错过了我的历史状态的某些内容？或者说目前浏览器还没有很好地实现这个功能？

我只用chrome测试过它，因为我没有用其他浏览器实现pushstate。

Answer 1

也许尝试替换状态？请参阅这个。

replaceState()

方法

history.replaceState() 的操作与history.pushState() 完全相同，只是replaceState() 修改当前历史条目而不是创建新条目。

当您想要更新当前历史记录条目的状态对象或 URL 以响应某些用户操作时，

replaceState() 特别有用。

Answer 2

我有一个相同的问题 - 我正在使用 History API 和 BackboneJS。

我想到的解决方案是有一个登录后表单重定向到的中间页面。这个中间页面的目的是在目标页面之前添加一个非POST页面，这样浏览器就不会提示重新登录-提交表单（Chrome 不会添加多余的条目）。

对于您的示例，在

example.com/page-1

中提交 POST 表单后，服务器应将用户重定向到

example.com/page-1a

example.com/page-1a

可以验证用户凭据是否存在，然后重定向到

example.com/page-2

。我相信这会解决您的问题。

对于重定向机制，我能想到的有3种选择：

1. 服务器端重定向
2. JavaScript (

   location.href="page-2"

   )
3. HTML 标头 (

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

   )

就我个人而言，我尝试过选项 1 和 2 - 它们对我来说效果很好。希望这有帮助！

Answer 3

收到 POST 后，您可以使用 303 See Other HTTP 响应重定向用户，从而将请求方法更改为 GET。 303 重定向后按重新加载将导致另一个 GET 请求，并且用户不会收到再次提交表单的提示。我相信这正是此状态代码的用途。

超文本传输协议 (HTTP) 303 查看其他重定向状态 响应代码表明重定向未链接到所请求的 资源本身，但到另一个页面（例如确认页面、 真实世界对象的表示 — 请参阅 HTTP range-14 — 或 上传进度页面）。此响应代码通常作为 PUT 或 POST 的结果。用于显示此重定向页面的方法 始终是 GET。