CORS可以应用于跨域XMLHttpRequests和图像请求。这个问题是关于图像请求我正常去浏览器版本兼容性http://caniuse.com/cors不清楚的问题和谷歌搜索没有得到好结果。
我发现最近的Chrome开发博客意味着CORS支持在现代浏览器中广泛传播，但由于WebGL安全问题可能会被破坏。
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
CORS的更多细节：
我们正在考虑使用canvas& CORS与W3C Working Draft http://www.w3.org/TR/cors/#use-cases中描述的跨域映像请求相关联。CORS被html canvas用于允许跨域资源使用，类似于Flash使用crossdomain.xml的方式。基本上，我们想要读取/编辑图像数据像素，我们不想使用相同的源代理服务器。
通常，如果图像加载跨域并与html canvas一起使用，则使用canvas.toDataURL()等函数访问像素会导致安全错误。但是，如果传递图像的服务器添加了这样的标题，则应允许跨域使用。
access-control-allow-origin: *
我们最关心的浏览器：
我们计划使用Flash来解决IE浏览器缺乏支持，因此对于具有CORS问题的桌面浏览器，我们也可以做到这一点，但是在移动闪存上并不是一个选择，并且使用代理来使请求相同来源不是在我们的用例中的一个选项。所以，我对Andriod，Iphone，IPAD浏览器支持CORS特别感兴趣。
解决方法
所有其他浏览器(包括Android Mobile)都会出现如下错误：
Failed: DOM Exception: SECURITY_ERR (18)
移动设备我测试了Android(三星Galaxy Galaxy 2.6.32.9)，Iphone和IPAD V1，并且在三者中都失败了。
您可以使用此网址测试您自己的移动设备：
http://maplarge.com/CrossOriginImageTest.html
测试脚本：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</title>
<script type="text/javascript">
function initialize() {
//will fail here if no canvas support
try {
var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.crossOrigin = '';
//domain needs to be different from html page domain to test cross origin security
img.src = 'http://lobbydata.com/Content/images/bg_price2.gif';
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
}
//will fail here if security error
img.onload = function () {
try {
var start = new Date().getTime();
can.width = img.width;
can.height = img.height;
ctx.drawImage(img,img.width,img.height);
var url = can.toDataURL(); // if read succeeds,canvas isn't dirty.
//get pixels
var imgd = ctx.getImageData(0,img.width);
var pix = imgd.data;
var len = pix.length;
var argb = []; //pixels as int
for (var i = 0; i < len; i += 4) {
argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
}
var end = new Date().getTime();
var time = end - start;
document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
"Success: Your browser supports CORS for cross domain images in Canvas <br>"+
"Read " + argb.length+ " pixels in "+ time+"ms</span>";
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
}
}
}
</script>
</head>
<body onload="initialize()">
<h2>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</h2>
<h2><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">What is CORS Image Security?</a></h2>
<h1 id="results" style="color:Orange;">Testing...</h1>
<canvas id="mycanvas"></canvas>
<br />
<a href="/Example/List">More Examples</a>
</body>
</html>
