关于Form表单POST请求，浏览器点击回退页面过期

前言

使用技术：

• SSM
• SpringSecurity
• 前端模板引擎Thymeleaf

一、出现原因？

在使用原因代码:

   <form id="formFrame" hidden target="frame" method="post"></form>
   <iframe src="你的URL" name="frame"></iframe>

这里通过form表单提交跳转页面，然后在iframe中显示提交的页面，以便页面实现页面的局部刷新。
然后在这的问题出现了，在页面提交后如果点击浏览器的回退按钮在iframe中会显示这个页面
我们回退浏览使用的是缓存页，而post请求不缓存，这是与get请求的区别，get请求回退/刷新无害，post相反。

如图所示status中显示Cache缓存丢失，所以可知post请求不缓存。

二、解决方法

通过网络各种搜索俩种解决方法：
1.通过在后端跳转页面设置页面缓存代码

  @PostMapping("/toTest")
    public String toTest(HttpServletResponse response){
        response.setHeader("Cache-Control","no-cache");                 // Pragma 控制页面缓存为HTTP 1.0中使用
        response.setHeader("Pragma","no-cache");                        // HTTP1.1中启用Cache-Control,no-cache，浏览器和缓存服务器都不应该缓存页面信息；
        response.setDateHeader("Expires",-1);                            // 设置过期实现 -1表示立马过期
        return "Test";
    }     

2.在前端页面中添加页面缓存代码(使用的Thymeleaf未成功)

HTML：

	<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="expires" CONTENT="-1">

JSP:

<% response.setHeader("Cache-Control","no-cache");
   response.setHeader("Pragma","no-cache");
   response.setDateHeader("Expires",-1); %>

可能还有一种解决方法，就是通过JS监听浏览器的回退这里贴上代码（jQuery实现）:

$(function() {
  //防止页面后退
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
  });
})

至此是我所了解的全部方法