vue SPA專案，瀏覽器和nginx反向代理快取問題解決實方案

三級快取問題
上述，我們看到瀏覽器沒有發出請求直接從磁碟中取出index.html檔案，這其實是二級快取。 
當瀏覽器訪問的伺服器沒有設定快取時，瀏覽器先200 OK from memory cache，如果瀏覽器快取中沒有該檔案，那麼瀏覽器會200 OK from disk cache 從磁碟中找改檔案，如果還找不到，瀏覽器會從服務端請求該檔案下載使用。

Last-Modified/If-Modified-Since
a.當瀏覽器第一次請求一個url時，伺服器端的返回狀態碼為200，同時HTTP響應頭會有一個Last-Modified標記著檔案在伺服器端最後被修改的時間。

b.瀏覽器第二次請求上次請求過的url時，瀏覽器會在HTTP請求頭新增一個If-Modified-Since的標記，用來詢問伺服器該時間之後檔案是否被修改過。

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頭。複製程式碼

在設定Expires、Etag/If-None-Match、Last-Modified/If-Modified-Since快取機制下，瀏覽器第一次請求和第二次請求快取機制
a.第一次請求

b.第二次請求

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/;           
      } 複製程式碼