nginx 配置浏览器不缓存文件 每次都会从服务器 请求新的文件

目录

    • 解决问题
    • 方法
    • 说明
  • 测试
    • 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环境

<!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.hqwc.cn/news/503612.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络——22TCP拥塞

TCP拥塞 TCP拥塞控制机制 端到端的拥塞控制机制 路由器不向主机有关拥塞的反馈信息 路由器的负担较轻符合网络核心简单的TCP/IP架构原则 端系统根据自身得到的信息&#xff0c;判断是否发生拥塞&#xff0c;从而采取动作 拥塞控制的几个问题 如何检测拥塞 轻微拥塞拥塞 控…

Java中封装的解析

在 Java 中&#xff0c;封装是一种将类的内部实现细节隐藏起来&#xff0c;只向外部暴露必要的接口的机制。这样可以提高代码的安全性、可维护性和可重用性。 封装的主要目的是保护类的内部状态不被外部直接访问&#xff0c;同时提供公共的方法来操作这些状态。通过封装&#…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x&#xff0c;y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

物联网与智慧城市:科技驱动下的城市智能化升级之路

一、引言 随着科技的不断进步和城市化进程的加速&#xff0c;物联网与智慧城市的结合已经成为推动城市智能化升级的关键力量。物联网技术以其强大的连接和数据处理能力&#xff0c;为智慧城市的建设提供了无限可能。本文旨在探讨物联网如何助力智慧城市的构建&#xff0c;以及…

midjourney提示词语法

更高级的提示可以包括一个或多个图像URL、多个文本短语和一个或更多个参数 Image Prompts 可以将图像URL添加到提示中&#xff0c;以影响最终结果的样式和内容。图像URL总是位于提示的前面。 https://docs.midjourney.com/image-prompts Text Prompt 要生成的图像的文本描述。…

什么是Vue组件?如何在Vue中定义一个组件?

在前端开发中&#xff0c;Vue.js是一种流行的JavaScript框架&#xff0c;用于构建交互式的Web界面。Vue组件是Vue.js中非常重要的概念&#xff0c;它允许我们将UI划分为可重用、独立和功能性的代码块。在Vue.js中&#xff0c;每个组件都有自己的HTML模板、JavaScript逻辑和CSS样…

C++_map与set

目录 一、set 1、set的用法 2、multiset 二、map 1、map的用法 2、map的operator[] 3、multimap 结语 前言&#xff1a; C中的map和set容器属于关联式容器&#xff0c;与序列式容器不同的地方在于&#xff08;序列式容器即vector、list&#xff0c;其底层是由线性数据…

国际光伏展

国际光伏展即国际光伏产业展览会&#xff0c;是全球范围内最具规模和影响力的光伏产业展览会之一。光伏展是一个专门展示和推广光伏技术和产品的平台&#xff0c;汇聚了全球各类光伏企业、研究机构和专家学者&#xff0c;是光伏行业交流、合作和发展的重要场所。 国际光伏展通常…

java中开源json处理库介绍

在Java生态系统中&#xff0c;有几个常用的开源库用于处理JSON数据。这些库各有特点&#xff0c;适用于不同的场景。下面我将介绍几个流行的Java JSON处理库&#xff0c;包括它们的基本情况、主要特点和核心API。 Jackson 基本情况 Jackson是一个流行的Java库&…

Tomcat服务部署、优化

一 Tomcat的基本介绍 Tomcat概念 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试 JSP 程序的首选。 当在一台机器上配置好Apache 服务器…

uniApp 调整小程序 单个/全部界面横屏展示效果

我们打开uni项目 小程序端运行 默认是竖着的一个效果 我们打开项目的 pages.json 给需要横屏的界面 的 style 属性 加上 "mp-weixin": {"pageOrientation": "landscape" }界面就横屏了 如果是要所有界面都横屏的话 就直接在pages.json 的 gl…

FlinkSQL ChangeLog

01 Changelog相关优化规则 0101 运行upsert-kafka作业 登录sql-client&#xff0c;创建一个upsert-kafka的sql作业&#xff08;注意&#xff0c;这里发送给kafka的消息必须带key&#xff0c;普通只有value的消息无法解析&#xff0c;这里的key即是主键的值&#xff09; CREA…