微信 H5 返回上一頁 AJAX 失效？GET 請求被瀏覽器緩存，改用 POST 徹底解決

問題現場

微信內嵌 H5 頁面：「我的個人中心」→ 點擊「填寫認證」→ 新頁面提交成功 → 用戶點擊左上角返回 → 原頁面需刷新認證狀態為「認證中」。

原代碼使用 $.ajax({ method: 'GET', ... })，現象：

• 頁面 onload 觸發 AJAX
• Network 面板顯示 200 OK 但 Response 為上一次緩存內容
• 後端 Controller 完全未被調用（無日誌、無斷點命中）

根因分析

1. 微信 WebView 返回機制：非標準導航，直接恢復歷史頁面快照（含 JS 堆狀態）
2. GET 請求幂等語義：瀏覽器/代理/微信內核均可能緩存 GET 響應（依據 Cache-Control、ETag、Last-Modified）
3. 頁面恢復時：JS 重新執行，但瀏覽器直接返回緩存響應，不發起真實網路請求

解決方案：強制 POST + 防緩存頭

前端調整

window.onload = function() {
    if (needRefresh) {
        $.ajax({
            url: "/isAuthenticing",
            type: "POST",                    // 關鍵：POST 不會被緩存
            data: { userid: getUserId() },
            cache: false,                    // jQuery 會自動加 _=timestamp 參數
            headers: { "X-Requested-With": "XMLHttpRequest" },
            success: function(res) {
                if (res.result === '1') $('#approveadd a').html("+認證中");
            }
        });
    }
};

後端配合

@PostMapping("/isAuthenticing")
@ResponseBody
public Map checkAuth(@RequestParam String userid) {
    // 業務邏輯
    return Map.of("result", "1");
}

同步加上響應頭防緩存：

response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);

進階方案：pageshow 事件 + SessionStorage 狀態標記

window.addEventListener('pageshow', function(e) {
    // persisted 為 true 表示從 BFCache 恢復
    if (e.persisted || sessionStorage.getItem('needRefresh')) {
        sessionStorage.removeItem('needRefresh');
        refreshAuthStatus(); // 發起 POST AJAX
    }
});

// 離開頁面前標記
window.addEventListener('pagehide', function() {
    sessionStorage.setItem('needRefresh', '1');
});

此方案兼容 iOS Safari BFCache、Android WebView、微信 WebView 等各種返回場景。

總結對比

推薦：POST + pageshow 雙重保險，徹底解決微信 H5 返回刷新難題。