为什么浏览器不缓存这些静态文件

Question

我的问题似乎与this 重复

但我有案子

• 当我用 F5 刷新页面时，图像没有从缓存中获取，而是请求发送到服务器，服务器响应 304 状态代码（未修改）
• 但如果我在地址栏中键入 URL 或从浏览器后退/前进按钮导航页面，则图像来自缓存。

但我在这里有一个疑问，为什么在 F5（页面刷新）上向原始服务器请求缓存图像

---

Nginx 配置

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
  expires 2d;
  proxy_pass http://localhost:3001;
  break;
}

---

请求标头

===================================
GET /assets/first_banner.png HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Accept: image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.65 Safari/537.36
Referer: http://localhost:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
===================================

响应标头：

===================================
HTTP/1.1 200 OK
Server: nginx/1.1.19
Date: Sun, 08 Dec 2013 20:31:06 GMT
Content-Type: image/png
Content-Length: 141498
Connection: keep-alive
Cache-Control: max-age=172800
Last-Modified: Wed, 23 Oct 2013 05:34:11 GMT
Etag: "0fc96d0218a47398d37dacca76916727"
X-Ua-Compatible: IE=Edge
X-Request-Id: 48d1ec3a24e2c0f13250ea74101f6753
X-Runtime: 0.021479
Expires: Tue, 10 Dec 2013 20:31:06 GMT
===================================

Answer 1

当您按下 F5 时，您会告诉浏览器检查网络服务器是否缓存在本地的内容仍然有效。

如果对象在网络服务器上过期，则浏览器会再次获取资产。如果对象仍然有效，则使用本地浏览器缓存的内容。