解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题

更新时间：2024年01月24日 16:21:53 作者：Queen_live

这篇文章主要介绍了解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题场景

代码运行环境：nginx
现象：发布新版本代码时浏览器总是有上次缓存
结果：页面显示混乱、更新的功能还是上个版本等一系列问题

原因

浏览器缓存

解决方法

1. 用户自行清理浏览器缓存

优点：清除浏览器缓存后可达到效果。
缺点：影响用户体验

2. 使用禁用缓存标签，实现禁用浏览器缓存

优点：可达到效果。
缺点：每次请求页面都要重新请求，我们还是希望有缓存的

   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
   <meta http-equiv="Cache" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />

3. 为js和css文件添加版本号

优点：可达到效果。
缺点：给所有的静态资源都添加版本号参数，这个参数可以是时间戳或者随机数。

处理方式的代码如下：

   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406" rel="external nofollow" >

4. 修改nginx 配置

（满足以下条件后有缓存可以修改nginx 配置文件）

背景：

1、使用nginx做代理

2、使用webpack等打包出一个唯一的入口文件index.html，或者其他方式的入口html文件

3、入口html文件中js已经使用hash后缀方式加载

=缺点：需要前端人员会配置nginx=

location ~ .*\.(htm|html)?$ {
 #原来这样设置的不管用
 #expires -1;
 #现在改为，增加缓存
 add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
 access_log on;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Nginx服务器中HTTP Headers相关的模块配置使用
这篇文章主要介绍了详解Nginx服务器中HTTP Headers相关的模块配置使用,包括ngx_http_headers_module与它的增强版ngx_headers_more的配置使用讲解,需要的朋友可以参考下
2016-01-01
Nginx 平滑升级的实现(拒绝服务漏洞)
本文主要介绍了Nginx 平滑升级的实现(拒绝服务漏洞),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-02-02
如何使用nginx充当mysql的负载均衡器
这篇文章主要介绍了使用nginx充当mysql的负载均衡器过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-06-06
angular6+springboot实现前后分离nginx配置
这篇文章主要介绍了angular6+springboot实现前后分离nginx配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Linux下给nginx安装waf模块
ngx_lua_waf是一个基于ngx_lua的web应用防火墙。代码很简单，开发初衷主要是使用简单，高性能和轻量级。下面我们来看看如何在为nginx安装waf模块
2016-08-08
如何利用nginx做代理缓存浅析
Nginx缓存主要是用于减轻后端服务器的负载,提高网站并发量,提升用户体验度,下面这篇文章主要给大家介绍了关于如何利用nginx做代理缓存的相关资料,需要的朋友可以参考下
2021-12-12
Nginx配置请求头携带原始请求信息的实现
本文主要介绍了Nginx配置请求头携带原始请求信息的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
Nginx 如何部署指定文件夹下的项目(本地测试)
这篇文章主要介绍了Nginx 如何部署指定文件夹下的项目(本地测试),分为配置vue.config.js,指定生成环境的包,配置路由模式为hash（history模式刷新后,找不到页面）,本文讲解的非常详细,需要的朋友可以参考下
2024-01-01
nginx 某些url只能由特定网段访问
在一些场景中,我们需要根据客户端的IP地址或网段对访问进行控制,在Nginx中针对某些URL只允许特定网段访问,本文就来介绍一下如何实现,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
详解Nginx限流配置
本文以示例的形式，由浅入深讲解Nginx限流相关配置，是对简略的官方文档的积极补充，感兴趣的朋友跟随小编一起看看吧
2019-09-09