如何完全防止通过HTTP

时间:2018-09-05 16:02:28

标签: javascript image http caching

在浏览器客户端的项目中,我动态创建了一个<img>标签,并将源设置为图像。它是从主机上的apache2提供的。

然后用户可以进行更改,有时我需要重新加载映像(因为服务器上的源已更改)。我可以通过将src属性更改为新图像来实现。

问题是,旧的(第一张)图像保留在缓存中,并且没有任何进一步的变化反映出来。

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

  • 我在每次重新加载时更改源图像的URL,方法是在URL中添加一个参数并将其值设置为当前时间。我检查确认,是的,每次加载实际上都从服务器请求一个不同的URL,但是该图像仍用作缓存版本。
  • 我将返回各种头文件以防止缓存。这是响应头的样子:

    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=/
    

请求的网址如下:

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

不幸的是,我没有选择。我尝试通过直接将图像src加载到新选项卡中,在服务器上进行更改然后重新加载来进行调试,但是即使服务器上不再存在该图像,图像也保持不变。

有人可以在这里向我指出正确的方向吗?有谁知道发生了什么或我一直在想什么?

很抱歉,我无法为此提供任何测试出口,所以我想这取决于自己遇到此问题的人。

谢谢。

2 个答案:

答案 0 :(得分:0)

试过这个吗?应该在.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,还可以选择为要检索的模板文件添加扩展名。

答案 1 :(得分:-2)

您可以通过添加url查询轻松地在客户端进行此操作。即

<img src="folder/my-image.jpg?cache=1">

每次您要刷新图像时,请增加高速缓存变量上的数字。即设为?cache=2。很多人会在此字段中使用日期/时间变量,以永不允许缓存。

编辑: 好的,对不起,只是意识到您尝试过此操作。另一种选择是使用data-uri。如果您有能力读取图像作为源,则可以将image标记中的data-uri用作base64十六进制字符串:

<img src="data:image/gif;base64,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">

我相信Internet Explorer的某些旧版本有大小限制。

编辑2: 如果您确实在寻找HTTP HEADER选项,是否也尝试过“ Expires”值。我记得,您必须使用一个负值,即Expires: -1。您还可以使用其他一些缓存控件,例如Cache-Control: max-age=0Cache-Control: must-revalidate

编辑3: 好的,您也尝试过Expires,但您使用的是零。您需要将其更改为-1。此处有完整说明:

HTTP Expires header values "0" and "-1"