PrimeFaces 8使用history.back()返回页面出现Confirm Form Resubmission问题

问题根因 #

• 你的搜索表单默认使用POST方式提交，POST属于非幂等请求，浏览器默认不会缓存POST请求返回的页面，调用javascript:history.back()回退时就会要求重新提交表单触发提示。
• 打开开发者工具后问题消失是因为F12默认开启了「禁用缓存」选项，跳过了本地缓存校验逻辑，所以不会触发重提交提示。

解决方案 #

方案1：搜索表单改用GET请求提交 #

搜索属于幂等操作，用GET完全符合语义，同时GET请求的结果浏览器会正常缓存，回退时不会触发重提交提示。
PrimeFaces配置示例：

<!-- 把form的method属性显式设置为get -->
<h:form method="get">
    <p:inputText value="#{searchBean.keyword}" />
    <p:commandButton value="搜索" action="#{searchBean.doSearch}" ajax="false" />
</h:form>

注意：如果搜索包含敏感参数不要使用该方案，GET参数会暴露在URL中。

方案2：使用PRG（Post/Redirect/Get）模式 #

如果必须用POST提交，提交完成后不要直接返回页面视图，而是做一次重定向到当前搜索页，把搜索参数通过闪存或URL参数传递，这样浏览器最后记录的是GET请求的页面，回退不会触发重提交。
PrimeFaces后台代码示例：

public String doSearch() {
    // 执行搜索逻辑
    // 重定向到当前页，可拼接搜索参数传递
    return "currentSearchPage?faces-redirect=true&keyword=" + URLEncoder.encode(keyword, StandardCharsets.UTF_8);
}

方案3：强制配置页面缓存 #

如果前两种方案改造成本较高，可以给搜索页添加响应头强制浏览器缓存页面：
后台添加响应头代码：

HttpServletResponse response = (HttpServletResponse) FacesContext.getCurrentInstance().getExternalContext().getResponse();
response.setHeader("Cache-Control", "max-age=3600, must-revalidate");
response.setHeader("Pragma", "cache");

也可以直接在xhtml页面的head标签内添加meta标签配置：

<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate" />
<meta http-equiv="Pragma" content="cache" />

方案4：使用AJAX提交搜索请求 #

搜索操作使用PrimeFaces的AJAX提交，整个页面不会刷新，浏览器历史记录不会新增POST请求条目，回退的时候直接回到进入搜索页之前的页面，不会触发重提交提示：

<h:form>
    <p:inputText value="#{searchBean.keyword}" />
    <p:commandButton value="搜索" action="#{searchBean.doSearch}" update="dataTableId" />
    <p:dataTable id="dataTableId" value="#{searchBean.resultList}" var="item">
        <!-- 表格内容配置 -->
    </p:dataTable>
</h:form>

内容的提问来源于stack exchange，提问作者J.J.Musti