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

Question

我的问题似乎与此重复

但我有一个案例

• 当我使用 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 时，您告诉浏览器检查 Web 服务器的内容（是否在本地缓存）是否仍然有效。

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