解决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代理配置只允许内部IP访问的实现方法
在本篇文章里小编给大家整理的是一篇关于添加Nginx代理配置只允许内部IP访问的实现方法的文章，有需要的朋友们可以学习下。
2019-10-10
利用nginx搭建RTMP视频点播、直播、HLS服务器
本文主要介绍了利用nginx搭建RTMP视频点播、直播、HLS服务器，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
nginx配置伪静态和适配客户端的方法步骤
这篇文章主要介绍了nginx配置伪静态和适配客户端的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
windows下nginx服务关不掉问题解决
这篇文章主要给大家介绍了关于windows下nginx服务关不掉问题解决的相关资料,nginx是一种网络服务器,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-08-08
zabbix自定义监控nginx状态实现过程
这篇文章主要为大家介绍了zabbix如何自定义监控nginx状态的实现过程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2021-10-10
Nginx的完整配置详解及实例代码
这篇文章主要介绍了Nginx的完整配置详解及实例代码的相关资料,需要的朋友可以参考下
2017-03-03
Nginx中include的具体用法
本文主要介绍了Nginx中include的具体用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
nginx的语法(基本语法和组成部分)
Nginx是一个高效、稳定的开源Web服务器和反向代理服务器，也可以用作邮件代理服务器、负载均衡器和HTTP缓存,很多人都选择nginx作为web服务器使用，下面是Nginx配置文件的一些基本语法和组成部分，使用Nginx的朋友可以了解一下
2023-05-05
nginx搭建高可用集群的实现方法
本文主要介绍了nginx搭建高可用集群的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
nginx配置引发的403问题解决办法
这篇文章主要介绍了nginx配置引发的403问题解决办法的相关资料,需要的朋友可以参考下
2017-06-06