Nginx 緩存導致頁面顯示舊代碼內容的解決方案

現象

開發 Web 頁面時，瀏覽器時而顯示新代碼，時而顯示已刪除的舊代碼（如 onclick 仍為舊函數名）。清除瀏覽器緩存無效。

根本原因

Nginx 默認開啟 靜態文件緩存（open_file_cache），且未正確配置 Cache-Control 頭，導致：

• Nginx 緩存舊版本文件內容
• 瀏覽器根據響應頭決定是否緩存
• 開發環境無版本號/哈希導致強制緩存失效

解決配置

# 開發環境：禁用緩存
location ~* \.(js|css|html)$ {
    add_header Cache-Control "no-store, no-cache, must-revalidate";
    expires -1;
    open_file_cache off;
}

# 生產環境：長期緩存 + 文件名哈希
location ~* \.(js|css|png|jpg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

前端配合

• 構建工具（Webpack/Vite）輸出帶哈希文件名：app.[contenthash].js
• HTML 引用自動更新，徹底解決緩存問題

快速驗證

curl -I https://localhost/app.js
# 檢查響應頭 Cache-Control, Expires, ETag