25

我的印象是 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 是否需要做更多工作才能将这些跨域图像视为不污染？

更新：

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

4

2 回答 2

25

不幸的是，即使正确设置了 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();
于 2013-11-01T20:02:58.253 回答
7

已确认：IE10 不支持 HTML 5 画布中的 CORS 图像。有关解决方法，请参阅 RReverser 的答案。

编辑

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

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

我能给你的唯一提示是，一般来说，allow-credentials与通配符 allow-origin不兼容。删除允许凭据或在允许来源中回显请求来源。

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

众所周知，IE10 的早期版本存在 AJAX 错误，

所以它可能是另一个浏览器错误。话又说回来，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获得，以帮助您入门。

于 2013-06-09T17:58:32.550 回答