记录一次由nginx配置引发出来的一系列的缓存问题

问题描述：

 

在做一个企业微信的移动端项目时，每次修改代码后并且打包、部署完毕，再次打开页面总是会有上一次的缓存，一开始以为是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;
    }

最终问题得到解决了！