在開發電商結帳流程時,常會遇到這樣的場景:用戶經過購物車、訂單地址填寫、確認下單三個步驟,在第三步生成訂單並清空購物車後,若用戶點擊瀏覽器「返回」鍵回到上一頁,可能導致重複提交或顯示已過期的數據。本文詳細介紹如何通過 HTTP 頭部控制緩存,徹底解決此問題。
在需要禁止緩存的頁面(如訂單地址頁)頂部,輸出以下 HTTP 頭部:
<?php
header("Cache-Control: no-cache, must-revalidate, no-store");
header("Pragma: no-cache");
header("Expires: -1");
?>
僅靠禁止緩存還不夠,需結合業務判斷:
<?php
// 訂單地址頁面邏輯
if (empty($_SESSION['cart_items'])) {
header("Location: cart_empty.php");
exit;
}
// 正常顯示頁面...
?>
當用戶點擊返回鍵時,瀏覽器嘗試讀取緩存失敗,會重新請求服務器,此時檢測到購物車為空,自動導向空購物車頁面,形成閉環保護。
瀏覽器「返回」按鈕默認讀取本地緩存文件。通過禁用緩存,強制瀏覽器向服務器發起新請求,配合服務端狀態檢查,實現邏輯層面的防重複提交。
上述三行頭部在 IE 中有效,但 Firefox 需額外添加 Cache-Control: no-store。現代瀏覽器建議完整設置:
header("Cache-Control: no-cache, no-store, must-revalidate, max-age=0");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
| 方案 | 優點 | 缺點 |
|---|---|---|
| HTTP 頭部禁用緩存 | 實現簡單,無需前端配合 | 部分舊版瀏覽器支持不完美 |
| Token 令牌機制 | 徹底解決重複提交,安全性高 | 需前後端配合,實現較複雜 |
| POST-Redirect-GET 模式 | 用戶體驗好,刷新不重複提交 | 需調整業務流程 |
禁用瀏覽器緩存只是防重複提交的一種手段,生產環境建議採用「Token 令牌 + PRG 模式 + 狀態檢查」的多層防護體系,確保數據一致性與用戶體驗雙贏。