javascript - 如何完全阻止通过 HTTP 提供的资源的图像缓存

Question

在浏览器客户端的项目中，我动态创建一个 <img> -tag 并将源设置为图像。它由主机上的 apache2 提供。

然后用户可以进行更改，我有时需要重新加载图像(因为服务器上的源已更改)。我通过更改 src 来做到这一点-新图像的属性。

问题是，旧的(第一个)图像保留在缓存中，并且不会反射(reflect)进一步的更改。

我当然尝试通过常规方式防止缓存:

• 我在每次重新加载时更改源图像的 URL，方法是向 URL 添加参数并将其值设置为当前时间。我检查并确认，是的，每次加载实际上都从服务器请求不同的 URL，但图像仍然作为缓存版本提供。

• 我将返回各种 header 以防止缓存。响应 header 如下所示:

  Access-Control-Allow-Headers: origin, x-requested-with, content-type
  Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
  Cache-control: no-cache, no-store, must-revalidate
  Connection: Keep-Alive
  Content-Length: 48503
  Content-Type: image/png
  Date: Wed, 05 Sep 2018 15:51:08 GMT
  Expires: 0
  Keep-Alive: timeout=5, max=100
  Pragma: no-cache
  Server: Apache/2.4.25 (Debian)
  Set-Cookie: locale=de; Domain=c.test; Path=/; Expires=Mon, 04 Mar 2019 15:51:08 GMT
  Set-Cookie: session_id=563bbb7d216d4edf7aed7e38427e15aec584414a605df6d2481223f840bf13f7; Domain=c.test; Path=/
  

请求的 URL 如下所示:

/event/590c713b5fd3197a0a16c851/reg/data/streamThumbnail?file=93c180702fd9926d40f77dd19ae48cee.crop.jpg&t=0478533001536162394&dimensions=130x181

不幸的是我别无选择。我尝试通过直接在新选项卡中加载图像 src，在服务器上进行更改然后重新加载来调试此问题，但图像保持不变，即使它根本不再存在于服务器上。

有人能指出我正确的方向吗？有谁知道发生了什么事或者我错过了什么？

很抱歉，我无法为此提供任何测试 channel ，所以我想这取决于那些自己遇到过此问题的人。

谢谢。

Answer 1

尝试过这个吗？应该在 .htaccess、httpd.conf 和 VirtualHost 中工作

<filesMatch "\.(html|htm|js|css)$">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </ifModule>
</filesMatch>

如果您使用的扩展名不是 .html，还可以选择为您正在检索的模板文件添加扩展名。