瀏覽器后退強制刷新頁面

問題描述

業務的支付支持分多次支付，每次支付的金額由購買人自己決定，即用購買人自己輸入。點擊下一步跳轉到收銀台，提交方式是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