停止缓存 XHR 响应中链接到的图像答案

【问题标题】：Stop image that is linked to in XHR response from being cached停止缓存 XHR 响应中链接到的图像
【发布时间】：2019-03-12 16:57:57
【问题描述】：

我正在使用 XHR 获取一些 HTML。 HTML 响应包含一个 img 元素，并且该图像由于某种原因被缓存。

服务器提供图像以及以下标头：

cache-control: no-cache, must-revalidate
content-security-policy: default-src 'self'; ...
content-type: image/png
date: Mon, 08 Oct 2018 03:41:00 GMT
expires: Sat, 26 Jul 1997 05:00:00 GMT
server: nginx (Ubuntu)
status: 200
strict-transport-security: max-age=30879000; includeSubDomains; preload
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

而XHR是这样使用的：

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        addToPage(xmlHttp.responseText);
    }
};
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlHttp.send();

XHR 响应示例：

<h1>Title</h1>
<p>Stuff</p>
<img src="/captcha-generator">

在不使用 XHR 时，它按预期工作。由于某种原因，当从 XHR 响应中链接到图像时，图像会被缓存。

为什么要缓存图片，如何强制浏览器获取新图片？

我当然可以附加一个独特的参数来打破缓存，（例如/captcha-generator?r={random-string}，但我想避免这种情况。

【问题讨论】：

你试过几个浏览器吗？
浏览器缓存是内置的，如果你想阻止它，你几乎只限于最后的 queryString 。但是，如果您只希望它在图像更改时获取它，我建议您添加一个带有应用程序版本号的 queryString
从响应头来看，nginx 似乎没有缓存资产。所以我假设这是由浏览器缓存的。如果是这样，那么除了附加 url 之外，我看不到任何其他方法。
尝试添加 Max-age=0
我也没有看到任何其他方式，这就是我问的原因。当明确告知浏览器不要缓存图像时，为什么/如何缓存图像，以及为什么它仅在链接 elm 是 XHR 响应的一部分时才会发生，肯定必须有一个很好的解释。

标签： javascript http caching

【解决方案1】：

在开发模式的情况下，它正在发生。所以如果谷歌 crome 转到右上角角落点击 cotomize 并控制 google crome。然后打开新的 inconginto 窗口开发模式

【讨论】：