问题描述:
在做一个企业微信的移动端项目时,每次修改代码后并且打包、部署完毕,再次打开页面总是会有上一次的缓存,一开始以为是cookie和webStorage缓存导致的,然后每次清除还是有缓存,后来把企业微信本身的缓存清除了之后再重进才有效果
问题推理:
如果每次打开是上一次的缓存,那可能就是index.html的根文件被缓存住了,因为index.html里面会加载所有css、js文件,当时打开network看了下,响应头里面并没有Cache-Control: no-store, no-cache的字段,那问题的原因肯定是出在这儿了,上线的相关的部署配置是放在nginx上的;因为公司走的都是统一的容器化部署,当时nginx的部署也可以定制化的;
原因定位:
根据上面的问题推理,找到了前端项目的相关nginx配置(default.conf ),代码如下:
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/log/host.access.log main; root /usr/share/nginx/html; location / { try_files $uri /index.html; index index.html index.htm; } location ^~ /freight { try_files $uri /freight/index.html; } location ^~ /s3/ { # fix ios previewImage 加载失败 proxy_set_header Accept "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"; proxy_pass xxxxxx; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } location ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$ { expires 7d; access_log off; add_header Cache-Control "public"; } location ~* .*\.(?:js|css)$ { expires 7d; access_log off; add_header Cache-Control "public"; } location ~* .*\.(?:htm|html)$ { add_header Cache-Control "no-store, no-cache"; add_header Pragma "no-cache"; } }
一眼扫过去,发现有针对html文件去除缓存的配置啊,如下:
location ~* .*\.(?:htm|html)$ { add_header Cache-Control "no-store, no-cache"; add_header Pragma "no-cache"; }
那为什么network里面响应头里面没有携带“no-store, no-cache” 信息呢?经过一番摸索,问题其实是出在下面这个配置上了,因为项目代码存放的文件夹是freight
// 当匹配到该路径时,try_files的作用是会直接解析freight下面index.html文件,nginx就会终止往下查询了 location ^~ /freight { try_files $uri /freight/index.html; }
那就需要把相关去除缓存的配置移动到location ^~ /freight这个匹配项里面去,如下所示:
location ^~ /freight { try_files $uri /freight/index.html; if ($uri ~* .*\.(?:htm|html)$) { add_header Cache-Control "no-store, no-cache"; add_header Pragma "no-cache"; } if ($uri ~* .*\.(?:js|css|jpg|jpeg|gif|png|ico|cur|gz|ttf|woff|ico|svg|svgz|mp4|ogg|ogv|webm)$) { expires 7d; access_log off; add_header Cache-Control "public"; } index index.html index.htm; }
最终问题得到解决了!
转自:http://Www.CnBlogs.Com/WebEnh/
如果想下次快速找到我,记得点下面的关注哦!
本博客Android APP 下载 |
![]() |
支持我们就给我们点打赏 |
![]() |
支付宝打赏 支付宝扫一扫二维码 |
![]() |
微信打赏 微信扫一扫二维码 |
![]() |
如果想下次快速找到我,记得点下面的关注哦!