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

EN

不幸的是，即使正确设置了CORS头，IE10仍然是唯一不支持画布图像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();

确认: IE10不支持HTML5画布中的CORS图像。

编辑

对不起，我以前没有处理过CORS图像，我认为这个问题是关于AJAX请求的。

根据Mozilla开发人员网络，您需要将image.crossOrigin设置为anonymous或use-credentials。另外，根据今天的页面，IE、Safari或Opera不支持这些属性。这个测试被用来证明IE9不支持它，而且似乎在IE10中同样的测试仍然失败，所以即使Safari和Opera在文章编写后增加了支持，IE10仍然很可能仍然缺乏支持。

我能给您的唯一提示是，一般来说，允许凭据是带有通配符允许原产地的不相容。删除“允许-凭据”或在“允许来源”中回显“请求源”。

下面是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以获得兼容性报告。如果任何事情都失败了，那么您就会在浏览器中出现bug或缺乏对CORS的支持。
2. 如果一切都通过，请使用测试发送的CORS头作为起点，以使CORS请求正常工作。然后一次更改一个标头，然后重新测试，直到您得到应用程序所需的标题，或者遇到您无法解释或处理的失败。
3. 如果有必要的话，发布一个关于一个打破CORS请求的微小变化的问题，在“之前”和“失败”之后同时发布“工作”信息。如果您可以包含一个可运行的示例，这总是有帮助的。

用于CORS测试客户端和服务器( Google的Python)的完整代码可在https://github.com/rapportive-oss/cors-test上使用，以帮助您入门。