浏览器后退强制刷新页面

问题描述

业务的支付支持分多次支付，每次支付的金额由购买人自己决定，即用购买人自己输入。点击下一步跳转到收银台，提交方式是post form 表单，跳转到收银台之后，选择相应的支付方式。 。今天测试测出了一个bug,确认收货页面展现的支付金额是0.01元，而实际的支付金额为0.03元。
浏览器：Chrome。

查找问题

拿到业务单号，查询支付记录，查询到了该业务单号在不到1s的时间间隔出现了两笔业务支付订单号和业务单号相同的记录，而业务支付单号应该是全局唯一的。从测试那得知他的操作方式是第一次输入金额0.01,点击下一步，跳转到收银台，然后点击浏览器的回退按钮，返回到上一页，修改支付金额为0.03，点击下一步，跳转到收银台，进行支付。那么这极有可能是由于浏览器后退，没有刷新页面造成的。

解决方案

在解决这个问题的过程中，尝试了如下几种方案：

• 通过meta 标签设置不缓存页面

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Expires" content="0">

但是很遗憾的是，并没有起作用。有网友说，需要Cache-Control:no-cache需要修改为Cache-Control:no-store但是浏览器后退仍然是从缓存中读取from disk cache。

有网友说现在不支持meta 标签去缓存，不知是否是这个原因？

• 通过过滤器设置服务端响应的Cache-Control:no-cache,设置缓存的过期为立刻过期Expires:-1

    /// <summary>
    /// 清除页面缓存
    /// </summary>
    public class NoCacheAttribute : ActionFilterAttribute
    {
        public override void OnResultExecuted(ResultExecutedContext filterContext)
        {
            filterContext.HttpContext.Response.CacheControl = "no-cache";
            filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            filterContext.HttpContext.Response.Headers.Set("Pragma", "no-cache");
            filterContext.HttpContext.Response.Headers.Set("Expires", "-1");
            base.OnResultExecuted(filterContext);
        }

    }

很遗憾的是，仍然是from disk cache从缓存中读取，只能是强制刷新了。

• 通过js windows.name控制，重新reload页面

  window.onload = function () {
        if (window.name == "hasLoad") {
            location.reload();
            window.name = "";
        } else {
            window.name = "hasLoad";
        }
    }

这个方案成功的解决了这个问题，但是存在一个缺点是，除第一次访问这个页面外，以后再访问这个页面都会reload两次。

参考

浏览器 返回上一页之后强行刷新一次

Cache-Control