带有 XHR 的 IE11 跨域缓存答案

【问题标题】：IE11 cross domain cache with XHR带有 XHR 的 IE11 跨域缓存
【发布时间】：2020-01-29 10:01:20
【问题描述】：

我只在 IE11 中遇到这个问题。 Chrome 和 Firefox 都可以正常工作。

我正在尝试使用 XHR 从不同的域获取图像。图像托管在 https 地址中。代码类似于这个小提琴：http://jsfiddle.net/ajojw9cq/

<img src="https://wordmagicbox.files.wordpress.com/2012/12/moto-morini-scrambler.jpeg?w=300&h=208" width=200 height=200/>

<script>

    function handleStateChange() {
        if (xhr.readyState === 4) {
            switch (xhr.status) {

            case 200:
                console.log("200");
                break;

            case 404:
                handleError();
                break;

            case 304:
                console.log("304");
                break;

            default:
                break;
            }
        }
    }

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://img.desmotivaciones.es/201104/Sinttulo_2159.jpg");
    xhr.onreadystatechange = handleStateChange;
    xhr.send(null);

</script>

这个小提琴和我的代码之间的主要区别是链接，我知道图像的域实际上允许我的域从中获取图像。

我确实可以在每个浏览器上获取图像，但 IE11 似乎没有缓存它们，即使使用 xhr.msCaching = "enabled"。

IE11 还在这些 XHR 请求中的每一个中发送一个“Cache-control: no-cache”标头，这很奇怪。我试图覆盖该标题，但它似乎不起作用。

另一个观察结果是，当我使用 <img> 标记并将 src 设置为该图像的 url 时，它会正常缓存并且我得到 304。如果我使用 XHR 或 Image() 类，它不会t 缓存（200），我真的需要它来缓存这两个中的一个。

这是 IE11 错误/问题吗？有什么解决办法吗？

【问题讨论】：

标签： https xmlhttprequest internet-explorer-11

【解决方案1】：

请尝试在 URL 的开头添加“http://allow-any-origin.appspot.com/”。

【讨论】：

我从中获取图像的服务器已经将“Access-Control-Allow-Origin: *”附加到响应中。

【解决方案2】：

这似乎是记录在案的限制，仅在 Microsoft Edge 下受支持

https://msdn.microsoft.com/en-us/library/hh673569(v=vs.85).aspx

Microsoft Edge 通过缓存通过启用 CORS 的 XHR 操作下载的资源来提高网络性能，其方式与直接下载资源的方式相同。以前，在许多情况下，此类项目的缓存将被禁用。这种新行为允许在后续请求中从本地磁盘加载更多资源，从而减少网络使用并缩短加载时间。”

解决方法是将站点添加到受信任区域并更改安全设置以激活跨域数据源，但我认为它仅适用于 Intranet 或特殊应用程序等有限情况，不适用于面向公众的网站

另一种解决方法可能是将资源保存在本地存储中

【讨论】：