nginx 配置瀏覽器不緩存文件每次都會從服務器請求新的文件

解決問題

適用于實時更新數據的，網頁
可以讓用戶每次都是重新請求，新的index.html
防止過期文件，影響用戶體驗
有時候更新了js 文件，但是用戶的瀏覽器則不會立即更新js文件的緩存
從而造成用戶體驗不佳
優點，每次都能打開最新的頁面
缺點，會增加服務器負荷

方法

要在 Nginx 中禁用緩存，你需要在相關的 location 配置中添加禁用緩存的指令。通常你可以使用 Cache-Control 和 Pragma 頭來達到這個目的。

以下是如何在 Nginx 中禁用緩存的示例配置：

server {# ... 其他配置 ...location / {add_header Cache-Control "no-cache, no-store, must-revalidate";add_header Pragma "no-cache";add_header Expires "0";# ... 其他配置 ...}
}

說明

在這個示例中，我們在根路徑的 location 配置中添加了三個頭信息：

Cache-Control: no-cache - 表示不緩存
Cache-Control: no-store - 表示不存儲緩存
Cache-Control: must-revalidate - 表示客戶端必須驗證資源是否過期
Pragma 頭通常用于向舊版本的 HTTP/1.0 客戶端發送指令。添加 “no-cache” 值會防止緩存文件。

Expires 頭的值設置為 “0” 表示資源已經過期。

通過這些配置，Nginx 會指示瀏覽器不要緩存這些文件，而是每次都向服務器發起請求獲取最新的內容。完成配置后，記得重新加載 Nginx 以使配置生效。

希望對大家有所幫助

測試

準備一個環境

html環境

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>寫入句子示例</title>  
</head>  
<body>  <div id="sentence"></div>  <!-- 這里引入了一個js 文件 --><script src='./index.js'></script>  
</body>  
</html>

js

document.getElementById("sentence").innerHTML = "這是一句話。";

環境

實驗瀏覽器谷歌

第一步

配置好js 之后
打開頁面
在這里插入圖片描述
可以看到 js 已經生效了

然后修改內容打開帶有js緩存的頁面

再這里對js 文件進行修改
在這里插入圖片描述

在這里插入圖片描述
如果時間短的話則不會重新加載index.js
文件
所以這里沒有刷新

強制刷新

當我使用強制刷新或者清理緩存之后再打開就已經修改了
在這里插入圖片描述

配置nginx 每次打開頁面都會重新請求index.js 文件

在域名的nginx配置文件中添加如下代碼即可
在這里插入圖片描述

重啟nginx

# 檢查nginx 配置是否正常
nginx -t
# 重啟nginx
nginx -s reload

在這里插入圖片描述

再次修改index.js

在這里插入圖片描述

在這里插入圖片描述
可以看到訪問到的就是我們修改的內容沒有重新請求

再次修改
在這里插入圖片描述
也是請求了新的js 沒有使用緩存js

總結

修改之前需要全局刷新，才會重新請求index.js 文件
修改之后，不用全局刷新，就可以重新請求到最新的 index.js

設置為全局

http {  # ... 其他配置 ...  map $http_host $cache_control_header {  default "no-cache, no-store, must-revalidate";  }  map $http_host $pragma_header {  default "no-cache";  }  map $http_host $expires_header {  default "0";  }  server {  # ... 其他配置 ...  location / {  add_header Cache-Control $cache_control_header;  add_header Pragma $pragma_header;  add_header Expires $expires_header;  # ... 其他配置 ...  }  }  # ... 可能還有其他 server 塊 ...  
}

在這里插入圖片描述

本章完結

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/715896.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/715896.shtml
英文地址，請注明出處：http://en.pswp.cn/news/715896.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！