reactjs - Chrome每次在同一会话中重新下载相同的图像

Question

我是 React 的新手，我正在尝试从我的public文件夹或任何远程 URL 提供一些文件。无论我从哪里请求图像，我的浏览器总是一遍又一遍地重新下载相同的图像。例如（虽然这适用于我的 React 应用程序中的所有图像），但我在我的状态中更改了一些东西，它创建了一个带有一些图像对象的图像对象src（只是一个常规的<img src...>，没什么特别的）。然后我做了一些事情，导致另一个图像加载相同的资源。浏览器通常应该立即从缓存中提供图像，但它会再次下载相同的图像。这是其中一个图像的请求/响应标头（但正如我所说，所有图像都会发生这种情况，无论它们是从localhost还是远程主机提供的）：

Request URL: http://localhost:3000/images/content-icons/small/[e-mail]
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:3000

Response Headers: 

Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Connection: keep-alive
Content-Length: 479
Content-Type: image/png
Date: Sun, 01 Mar 2020 10:03:41 GMT
ETag: W/"1df-1707cbf1a8e"
Last-Modified: Tue, 25 Feb 2020 14:27:43 GMT
X-Powered-By: Express

Request Headers:

Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36

这个问题发生在 Chrome (v80) 上，我已经三次检查了该Disable cache复选框未选中。显然，Safari 没有问题。它正确地从内存中缓存和服务。

Chrome 和缓存发生了什么？

标签： reactjsgoogle-chromehttpcaching