Question

我的印象是Internet Explorer 10完全支持CORS，但现在我不确定。

我们有一个JS / HTML5应用程序，它使用多个域，并读取图像数据。我们在JS中从另一个域加载图像，imageDraw（）将图像加载到画布，然后在画布上使用getImageData。（我们不使用跨域XMLHttpRequests）。为此，我们必须在服务于图像的服务器上设置响应标头：

access-control-allow-origin: *
access-control-allow-credentials: true

在加载前将其设置在JS中的图像对象上：

image.crossOrigin = 'Anonymous'; //Also tried lowercase

这适用于所有新浏览器，除了IE10 ，当我们尝试读取数据时会出现安全错误。

SCRIPT5022: SecurityError

是否还需要为IE10做更多的事情才能将这些跨域图像视为不污染？

更新：

我注意到前一个问题this answer。 有趣的是this JSFiddle也不适用于IE10 - 任何人都可以确认这在IE10中不起作用吗？

Answer 1

不幸的是，即使正确设置CORS标头，IE10仍然是唯一不支持使用CORS绘制Canvas图像的流行浏览器。但是通过XMLHttpRequest有解决方法：

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response), img = new Image();
    img.onload = function () {
        // here you can use img for drawing to canvas and handling
        // ...
        // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

Answer 2

确认：IE10不支持HTML 5画布中的CORS图像。请参阅 RReverser's answer用于解决方法。

修改

抱歉，我之前没有处理过CORS图像，并认为这个问题与AJAX请求有关。

根据Mozilla Developer Network，您需要将image.crossOrigin设置为anonymous或use-credentials。此外，根据今天的页面，IE，Safari或Opera不支持这些属性。 This test是为了证明IE9不支持它，似乎在IE10中同样的测试仍然失败，所以即使Safari和Opera自编写MDN文章以来已经添加了支持，IE10很可能仍然缺乏支持。

我能给你的唯一提示是，通常，allow-credentials为incompatible，带有通配符allow-origin。删除allow-credentials或在allow-origin中回显请求Origin。

以下是AJAX调用，而不是图像或视频画布资源

早期版本的IE10已知有AJAX错误，

所以它可能是另一个浏览器错误。再说一次，CORS看起来很狡猾。我建议以下步骤来调试CORS问题。

将浏览器指向http://test-cors.appspot.com/#technical以获取兼容性报告。如果有任何失败，那么您在浏览器中有错误或缺乏对CORS的支持。
如果一切都通过，请使用测试发送的CORS标头作为起点，以使您的CORS请求正常工作。然后一次更改一个标题并重新测试，直到您按照您希望的方式获得应用程序的标题，否则您将遇到无法解释或解决的故障。
如果有必要，发布一个关于破坏CORS请求的一个微小变化的问题，发布工作“之前”和失败“之后”。如果您可以包含一个可运行的示例，它总是有帮助的。

https://github.com/rapportive-oss/cors-test提供了CORS测试客户端和服务器的完整代码（Google App Engine的Python脚本），以帮助您入门。

IE10和Image / Canvas的跨源资源共享（CORS）问题

2 个答案:

修改

以下是AJAX调用，而不是图像或视频画布资源