问题描述:
在做一个企业微信的移动端项目时,每次修改代码后并且打包、部署完毕,再次打开页面总是会有上一次的缓存,一开始以为是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;
}
最终问题得到解决了!