Question

我只在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”标头，这很奇怪。我试图覆盖那个标题，但它似乎没有用。

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

这是IE11错误/问题吗？有没有解决方法？

Answer 1

请尝试添加＆＃34; http://allow-any-origin.appspot.com/＆＃34;到URL的开头。

Answer 2

这似乎是一个记录在案的限制，只受Microsoft Edge支持

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

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

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

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

IE11跨域缓存与XHR

2 个答案: