緩存驗證Last-Modifie和Etag的使用
阿新 • • 發佈：2018-12-06
res tag 讀取 如何 cti eat require function .html 
看這張圖，是瀏覽器發出請求到請求緩存到過程，這麽一個原理
看這張圖，是瀏覽器發出請求到請求緩存到過程，這麽一個原理
那麽http裏面如何進行驗證呢？主要有兩個驗證到http頭 Last-Modified(上次修改時間) 主要配合If-Modified-Since或者If-Unmodified-Since使用，什麽意思呢，如果請求一個資源，資源返回上面有Last-Modified這個頭，指定了一個時間，那麽下次請求的時候，就會帶上這個頭，通過If-Modified-Since或If-Unmodified-Since，通常是使用If-Modified-Since，服務器通過If-Modified-Since對比上次給的Last-Modified，驗證資源是否需要更新 Etag
// server.js const http = require(‘http‘); const fs = require(‘fs‘); http.createServer(function(req,res){ console.log(‘req come‘, req.url); if (req.url === ‘/‘) { const html = fs.readFileSync(‘test.html‘, ‘utf8‘); res.writeHead(200,{ ‘Content-Type‘: ‘text/html‘ }) res.end(html); } if (req.url === ‘/script.js‘) { res.writeHead(200,{ ‘Content-Type‘: ‘text/javascript‘,‘Cache-Control‘: ‘max-age=2000000000, no-cache‘, // 緩存時間很長，但是下次請求時還是需要通過服務端驗證 ‘Last-Modified‘: ‘123‘, ‘Etag‘: ‘777‘ }) res.end(‘console.log("script loaded")‘); } }).listen(8888); console.log(‘server listening on 8888‘); console.log(‘http://localhost:8888/‘)
<!--test.html--> <body> <script src=‘/script.js‘></script> </body>
如圖，瀏覽器發送了請求，服務端返回了,Cache-Control,Last-Modified:123,Etag:777，
//server.js const http = require(‘http‘); const fs = require(‘fs‘); http.createServer(function(req,res){ console.log(‘req come‘, req.url); if (req.url === ‘/‘) { const html = fs.readFileSync(‘test.html‘, ‘utf8‘); res.writeHead(200,{ ‘Content-Type‘: ‘text/html‘ }) res.end(html); } if (req.url === ‘/script.js‘) { console.log(req.headers); const etag = req.headers[‘if-none-match‘]; if (etag === "777") { res.writeHead(304, { ‘Content-Type‘: ‘text/javascript‘, ‘Cache-Control‘: ‘max-age=2000000000, no-cache‘, // 緩存時間很長，但是下次請求時還是需要通過服務端驗證 ‘Last-Modified‘: ‘123‘, ‘Etag‘: ‘777‘ }) res.end(‘‘); } else { res.writeHead(200,{ ‘Content-Type‘: ‘text/javascript‘, ‘Cache-Control‘: ‘max-age=2000000000, no-cache‘, // 緩存時間很長，但是下次請求時還是需要通過服務端驗證 ‘Last-Modified‘: ‘123‘, ‘Etag‘: ‘777‘ }) res.end(‘console.log("script loaded")‘); } } }).listen(8888); console.log(‘server listening on 8888‘); console.log(‘http://localhost:8888/‘);
服務端做了修改，返回了304，但是response是返回有內容的，這是chrome緩存工具會讀取出來，如果寫一些新的內容，再請求，發現還是老的，所以讀的是緩存裏面的內容，把Disable cache鉤上，就會發現請求新的數據了
緩存驗證Last-Modifie和Etag的使用