Javascript IE10和图像/画布的跨源资源共享（CORS）问题

我的印象是InternetExplorer10完全支持CORS，但现在我不确定

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

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

并在加载前在JS中的image对象上设置：

image.crossOrigin='Anonymous'//还尝试了小写

除了IE10在我们试图读取数据时抛出安全错误之外，这对所有新浏览器都很有效。

SCRIPT5022: SecurityError

IE10还需要做些什么才能将这些跨域图像视为不受污染？

更新：

---

我注意到了前面的一个问题有趣的是，IE10也不适用-有人能确认这在他们的IE10中不适用吗？确认：IE10不支持HTML 5画布中的CORS图像。请参阅 为了解决问题

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

根据需要将

image.crossOrigin

设置为

匿名

或

使用凭据

。此外，根据今天的页面，IE、Safari或Opera不支持这些属性。这样做是为了证明IE9不支持它，而且似乎在IE10中同样的测试仍然失败，所以即使Safari和Opera在MDN文章撰写后增加了支持，IE10也很可能仍然缺乏支持

我能给您的唯一提示是，通常情况下，允许凭据使用通配符allow origin。删除允许凭据或在允许来源中回显请求来源

下面是AJAX调用，而不是图像或视频画布资源 IE10的早期版本已知存在AJAX错误

所以这可能是另一个浏览器错误。再说一次，CORS在正确操作上有点诡计多端。我建议使用以下步骤来调试CORS问题

将浏览器指向以获取兼容性报告。如果出现任何故障，则说明浏览器中存在错误或缺少对CORS的支持

如果一切都通过了，则使用测试发送的CORS头作为开始点，以使CORS请求正常工作。然后一次更改一个标题，然后重新测试，直到获得应用程序所需的标题，或者遇到无法解释或解决的故障

如果有必要，发布一个问题，关于一个微小的改变，打破了CORS的要求，张贴工作“之前”和失败的“之后”。如果您可以包含一个可运行的示例，这总是有帮助的

---

CORS测试客户机和服务器的完整代码（用于Google App Engine的Python脚本）可在上获得，以帮助您入门

不幸的是，IE10仍然是唯一一个不支持CORS的流行浏览器，即使正确设置了CORS标题，也不支持将图像绘制到画布。但通过XMLHttpRequest可以解决这个问题：

var xhr=new-XMLHttpRequest（）；
xhr.onload=函数（）{
var url=url.createObjectURL（this.response），img=new Image（）；
img.onload=函数（）{
//在这里，您可以使用img绘制画布并进行处理
// ...
//完成后别忘了释放内存（只要将图像绘制到画布上，就可以这样做）
revokeObjectURL（URL）；
};
img.src=url；
};
xhr.open（'GET'，url，true）；
xhr.responseType='blob'；
xhr.send（）；

设置

访问控制允许原点

可能是必要的，但有时不够。尝试设置答案中给出的额外选项：尝试使用浏览器点击。如果这暴露了问题，那么您可能无法对此采取任何措施。@user568109-我现在已经添加了answser中提到的额外标题，但不幸的是，我仍然看到了相同的问题。@UpTheCreek同意了这一点——我刚刚在Opera中对其进行了测试，效果也很好。因此，如果IE被正确地标记为“不受支持”，那么它就是奇数。您是否尝试过将

image.crossOrigin

设置为

匿名“

（小写）或

true

？我认为你们发布的大写版本是规范正确的，但也许IE实现了错误？我在一个项目中做了很多测试，我在网站的favicon上做了一些计算。IE9和IE10都不支持

中图像资源的CORS。最后，我编写了一个代理来获取图像，以使图像请求不会违反相同的原始规则。对不起，谢谢-不幸的是仍然没有运气。1报告所有ok，但是我在测试的每个响应中都指定了所有的头，并且仍然得到安全错误。我不相信这个测试真的在测试“所有东西”——例如1）没有一个响应头使用通配符访问控制允许原点设置2）它根本没有测试drawImage或getImageData，3）它没有测试image.crossOrigin=“Anonymous”feature.BTW-我发现一个JSFIDLE完美地显示了这个问题（）-有关背景信息，请参阅我的更新问题。谢谢您提供的额外提示。关于不兼容性-据我所知，使用“image.crossOrigin”必须使用

访问控制允许凭据

，因此我们可能无法删除该凭据。正如您所说，动态允许源站标题可能是一个选项，但使用这两个标题我没有发现任何问题。

access control allow credentials

如果您将

image.crossOrigin

设置为

anonymous

，则不需要。仅当它设置为

使用凭据时才需要它。通过AJAX调用，我看到了allow origin wi