nginx 配置浏览器不缓存文件 每次都会从服务器 请求新的文件
创始人
2025-01-21 07:32:06
0

目录

    • 解决问题
    • 方法
    • 说明
  • 测试
    • html环境
    • js
    • 环境
    • 第一步
    • 然后修改内容 打开带有js缓存的页面
    • 强制刷新
  • 配置nginx 每次打开页面都会重新请求index.js 文件
    • 重启nginx
    • 再次修改index.js
  • 总结
  • 设置为全局

解决问题

适用于实时更新数据的,网页
可以让用户每次都是重新请求,新的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环境

                                  写入句子示例             

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 块 ...   } 

在这里插入图片描述


本章完结

相关内容

热门资讯

透视模板!wepoker辅助透... 透视模板!wepoker辅助透视软件(AApoker透视软件)切实真的是有辅助技巧(哔哩哔哩)1、点...
截至目前!微信微乐游戏辅助脚本... 截至目前!微信微乐游戏辅助脚本(透视)微信微乐挂有没有(一贯是真的辅助app)-哔哩哔哩1、透视辅助...
透视资料!wepoker怎么提... 透视资料!wepoker怎么提高运气(德普之星app)确实真的是有辅助插件(哔哩哔哩)1、wepok...
网友热议!微信微乐游戏辅助脚本... 网友热议!微信微乐游戏辅助脚本(透视)微乐小程序自建房透视(一贯是真的辅助辅助器)-哔哩哔哩1、让任...
透视指南书!wepoker辅助... 透视指南书!wepoker辅助器有哪些功能(HHpoker真的假的)一直真的是有辅助神器(哔哩哔哩)...
透视好友房!微乐小程序黑科技免... 透视好友房!微乐小程序黑科技免费(透视)微乐小程序破解(一贯存在有辅助平台)-哔哩哔哩透视好友房!微...
透视绝活!wpk刷入池率脚本(... 透视绝活!wpk刷入池率脚本(AApoker提高)真是存在有辅助技巧(哔哩哔哩)1、下载好wpk刷入...
透视最新!微乐小程序黑科技(透... 透视最新!微乐小程序黑科技(透视)小程序微乐辅助软件(确实是真的辅助下载)-哔哩哔哩1、起透看视 辅...
透视项目!佛手在线是不是有挂(... 透视项目!佛手在线是不是有挂(WePoKer辅助挂)好像是真的有辅助教程(哔哩哔哩)1.佛手在线是不...
透视app!微信微乐游戏辅助脚... 透视app!微信微乐游戏辅助脚本(透视)手机微乐小程序破解器如何使用(确实是有辅助下载)-哔哩哔哩1...