IE10 和图像/画布的跨域资源共享 (CORS) 问题

Question

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

我们有一个使用多个域并读取图像数据的 JS/HTML5 应用程序。我们正在从另一个域加载 JS 中的图像，将图像 imageDraw()ing 到我们的画布，然后在画布上使用 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 仍然是唯一不支持绘制到 Canvas 的图像的 CORS 的流行浏览器。但是通过 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。删除允许凭据或在允许来源中回显请求来源。

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

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

• http://bugs.idsl.pl/ie/xhr.htm
• http://connect.microsoft.com/IE/feedback/details/771552/i-e-10-and-the-post-method

所以它可能是另一个浏览器错误。话又说回来，CORS 看起来很棘手。我推荐以下步骤来调试 CORS 问题。

1. 将浏览器指向http://test-cors.appspot.com/#technical 以获取兼容性报告。如果出现任何故障，则说明您的浏览器存在错误或缺少对 CORS 的支持。
2. 如果一切顺利，请使用测试发送的 CORS 标头作为起点，让您的 CORS 请求正常工作。然后一次更改一个标头并重新测试，直到您以应用程序所需的方式获得标头，或者遇到无法解释或解决的故障。
3. 如有必要，发布一个关于破坏 CORS 请求的微小更改的问题，同时发布工作“之前”和失败的“之后”。如果您可以包含一个可运行的示例，它总是有帮助的。

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