Vue SPA 项目，浏览器和 nginx 反向代理缓存问题解决实方案

Last-Modified/If-Modified-Since

a. 当浏览器第一次请求一个url时，服务器端的返回状态码为200，同时HTTP响应头会有一个Last-Modified标记着文件在服务器端最后被修改的时间。

Etag 主要为了解决 Last-Modified 无法解决的一些问题:

Expires

location ~ \.(wma|wmv|asf|mp3|mmf|zip|rar|swf|flv)$ {
               root /var/www/upload/;
               expires max;
       }复制代码

expires 指令可以控制 HTTP 应答中的“ Expires ”和“ Cache-Control ”的头标（起到控制页面缓存的作用）
语法：expires [time|epoch|max|pff]
默认值：off
expires指令控制HTTP应答中的“Expires”和“Cache-Control”Header头部信息，启动控制页面缓存的作用
time:可以使用正数或负数。“Expires”头标的值将通过当前系统时间加上设定time值来设定。
time值还控制"Cache-Control"的值：
负数表示no-cache
正数或零表示max-age=time

epoch：指定“Expires”的值为 1 January,1970,00:00:01 GMT
max:指定“Expires”的值为31 December2037 23:59:59GMT,"Cache-Control"的值为10年。
-1：指定“Expires”的值为当前服务器时间-1s，即永远过期。
off：不修改“Expires”和"Cache-Control"的值

expires使用了特定的时间，并且要求服务器和客户端的是中严格同步。
而Cache-Control是用max-age指令指定组件被缓存多久。
对于不支持http1.1的浏览器，还是需要expires来控制。所以最好能指定两个响应头。
但HTTP规范规定max-age指令将重写expires头。复制代码

基于vue-cli3.x脚手架下打包的spa项目缓存机制方案

location ^~ /aa/ {  
        proxy_set_header  X-Real-IP  $remote_addr;
        #html 文件不缓存（你也可以设置为协商缓存，但是参考其他大厂方案，一般index.html入口文件都不作缓存，一方面是因为index.html很小基本在1KB左右，另外这个文件内容变化频繁）
        if ($request_filename ~* ^.*?.(html|htm)$){
            expires -1s;
            add_header Cache-Control no-cache;
           }
         proxy_pass  http://XXX/aa/;               
      } 复制代码

location ^~ /aa/ {  
   proxy_set_header  X-Real-IP  $remote_addr;        #html 文件不缓存（你也可以设置为协商缓存，但是参考其他大厂方案，一般index.html入口文件都不作缓存，一方面是因为index.html很小基本在1KB左右，另外这个文件内容变化频繁）
        if ( $request_uri = "/aa/") {
            expires -1s;
            add_header Cache-Control no-cache;
       #add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";           }
         proxy_pass  http://XXX/aa/;           
      } 复制代码