解决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设置代理服务器
今天小编就为大家分享一篇关于使用nginx设置代理服务器，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
Nginx服务器的SSL证书配置以及对SSL的反向代理配置
这篇文章主要介绍了Nginx服务器的SSL证书配置以及对SSL的反向代理配置方法,通常在开启全站HTTPS时会用到,需要的朋友可以参考下
2016-01-01
nginx rewrite参数解析
这篇文章主要介绍了nginx rewrite参数解析的相关资料,需要的朋友可以参考下
2022-11-11
Nginx的反向代理实例详解
这篇文章主要介绍了Nginx的反向代理实例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
Nginx开启stub_status模块配置方法
这篇文章主要介绍了Nginx开启stub_status模块配置方法,Nginx中的stub_status模块主要用于查看Nginx的一些状态信息,本文讲解它的开启配置方法,需要的朋友可以参考下
2015-02-02
Nginx服务器中HTTP 301跳转到带www的域名的方法
这篇文章主要介绍了Nginx服务器中HTTP 301跳转到带www的域名的方法,包括从HTTPS 301提示跳转等rewrite相关的方法,需要的朋友可以参考下
2015-07-07
Nginx-rtmp实现直播媒体实时流效果
这篇文章主要介绍了Nginx-rtmp实现直播媒体实时流效果,文中给出了总体设计图，为了整合平台，会自建RTMP流媒体服务器和使用云厂商SaaS的RTMP流媒体服务，需要的朋友可以参考下
2018-08-08
Nginx中配置WebSocket代理的详细步骤
Nginx 可以配置为 WebSocket 代理,将 WebSocket 连接从客户端转发到后端服务器,以下是如何在 Nginx 中配置 WebSocket 代理的详细步骤和示例配置,需要的朋友可以参考下
2025-02-02
nginx cookie有效期讨论小结
这篇文章主要介绍了nginx cookie有效期讨论小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
详解nginx代理socket.io服务踩坑
这篇文章主要介绍了详解nginx代理socket.io服务踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10