Html IE10 和图像/画布的跨域资源共享 (CORS) 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16956295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE10 and Cross-origin resource sharing (CORS) issues with Image / Canvas
提问by UpTheCreek
I was under the impression that Internet Explorer 10 fully supported CORS, but now I'm not sure.
我的印象是 Internet Explorer 10 完全支持 CORS，但现在我不确定。
We have a JS/HTML5 App that uses multiple domains, and reads image data. We are loading images in the JS from another domain, imageDraw()ing the image to our canvas, and then using getImageData on the canvas. (We aren't using cross-domain XMLHttpRequests). For this to work we have had to set response headers on the server that's serving the images:
我们有一个使用多个域并读取图像数据的 JS/HTML5 应用程序。我们正在从另一个域加载 JS 中的图像，将图像通过 imageDraw() 绘制到我们的画布上，然后在画布上使用 getImageData。（我们没有使用跨域 XMLHttpRequests）。为此，我们必须在提供图像的服务器上设置响应标头：
access-control-allow-origin: *
access-control-allow-credentials: true
And set this on the image object in the JS before loading:
并在加载前在 JS 中的图像对象上设置：
image.crossOrigin = 'Anonymous'; //Also tried lowercase
image.crossOrigin = 'Anonymous'; //Also tried lowercase
This is working fine for all new browsers, apart from IE10which is throwing security errors when we try to read the data.
这适用于所有新浏览器，除了 IE10 之外，当我们尝试读取数据时会抛出安全错误。
SCRIPT5022: SecurityError
Is there something more that needs to be done for IE10 to treat these cross domain images as not tainting?
IE10 是否还需要做更多的事情来将这些跨域图像视为没有污染？
UPDATE:
更新：
I noticed this answerto a previous question. Interestingly this JSFiddlealso does not work for IE10 - can anyone confirm that this does not work in their IE10?
我注意到了上一个问题的这个答案。 有趣的是，这个 JSFiddle也不适用于 IE10 - 谁能确认这在他们的 IE10 中不起作用？
回答by RReverser
Unfortunately, IE10 still remains the only popular browser that doesn't support CORS for image drawn to Canvas even when CORS headers are properly set. But there is workaround for that via XMLHttpRequest:
不幸的是，即使正确设置了 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();
回答by Old Pro
Confirmed: IE10 does not support CORS images in an HTML 5 canvas.See RReverser's answerfor a workaround.
已确认：IE10 不支持 HTML 5 画布中的 CORS 图像。有关解决方法，请参阅 RReverser 的回答。
Edit
编辑
Sorry, I haven't dealt with CORS images before and thought this question was about an AJAX request.
抱歉，我之前没有处理过 CORS 图像，并认为这个问题是关于 AJAX 请求的。
According to Mozilla Developer Networkyou need to set image.crossOriginto anonymousor use-credentials. Also, according to that page today, these attributes are not supported in IE, Safari, or Opera. This testwas made to demonstrate that IE9 did not support it and it seems that same test still fails in IE10, so even if Safari and Opera have added support since the MDN article was written, it is quite possible that IE10 still lacks support.
根据Mozilla Developer Network，您需要设置image.crossOrigin为anonymous或use-credentials。此外，根据今天的页面，IE、Safari 或 Opera 不支持这些属性。 做这个测试是为了证明IE9不支持，而且在IE10中似乎同样的测试仍然失败，所以即使自MDN文章发布以来Safari和Opera增加了支持，IE10也很可能仍然缺乏支持。
The only tip I can give you is that in general, allow-credentials is incompatiblewith a wildcard allow-origin. Either drop the allow-credentials or echo the request Origin in the allow-origin.
我可以给您的唯一提示是，通常，allow-credentials与通配符 allow-origin不兼容。删除allow-credentials 或在allow-origin 中回显请求Origin。
Below is for AJAX calls, not image or video canvas resources
下面是 AJAX 调用，而不是图像或视频画布资源
Early versions of IE10 were known to have AJAX bugs,
已知早期版本的 IE10 存在 AJAX 错误，
- http://bugs.idsl.pl/ie/xhr.htm
- http://connect.microsoft.com/IE/feedback/details/771552/i-e-10-and-the-post-method
- http://bugs.idsl.pl/ie/xhr.htm
- http://connect.microsoft.com/IE/feedback/details/771552/ie-10-and-the-post-method
so it could be another browser bug. Then again, CORS is deceptively tricky to get right. I recommend the following steps to debug CORS problems.
所以它可能是另一个浏览器错误。再说一次，CORS 很难做到正确。我推荐以下步骤来调试 CORS 问题。
- Point the browser at http://test-cors.appspot.com/#technicalto get a compatibility report. If anything fails then you have a bug or lack of support for CORS in the browser.
- If everything passes, use the CORS headers the test is sending as a starting point to get your CORS request working. Then change one header at a time and retest until you get the headers the way you want for your application or you run into a failure you cannot explain or work around.
- If necessary, post a question about that one tiny change that breaks the CORS request, posting both the working "before" and the failing "after". It always helps if you can include a runnable example.
- 将浏览器指向http://test-cors.appspot.com/#technical以获取兼容性报告。如果有任何失败，那么您的浏览器存在错误或缺乏对 CORS 的支持。
- 如果一切顺利，请使用测试发送的 CORS 标头作为起点，让您的 CORS 请求工作。然后一次更改一个标头并重新测试，直到您按照应用程序所需的方式获得标头，或者遇到无法解释或解决的故障。
- 如有必要，发布一个关于破坏 CORS 请求的微小更改的问题，发布工作“之前”和失败的“之后”。如果您可以包含一个可运行的示例，它总是有帮助的。
The complete code for the CORS test client and server (Python script for Google App Engine) is available at https://github.com/rapportive-oss/cors-testto get you started.
CORS 测试客户端和服务器的完整代码（适用于 Google App Engine 的 Python 脚本）可在https://github.com/rapportive-oss/cors-test上获取以帮助您入门。
