Javascript 尝试使用Ajax获取图像时的访问控制源问题

首先，我尝试使用onload事件等正常方式获取图像，但是canvas不允许我导出它，因为它被“污染”或其他任何东西

因此，我尝试像浏览器一样获取图像（get请求），但它仍然不允许我获取数据

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function(e){
 if(this.status == 200){
   do things
 }       
};
xhr.send();

我不明白，如果浏览器可以直接访问图像，为什么会存在这种安全限制？这和我用javascript获取图像数据不是一回事吗

然后我试着像浏览器一样获取图像（获取请求）

Canvas和XMLHttpRequest都使用CORS来拥有跨不同来源访问数据的权限。从中请求数据的服务器必须设置CORS头才能授予该权限

我不明白，如果浏览器可以直接访问图像，为什么会存在这种安全限制？这和我用javascript获取图像数据不是一回事吗

直接访问图像将向用户显示图像

使用JavaScript访问图像将允许站点作者对图像数据执行任何他们喜欢的操作，包括将其复制到他们自己的服务器

图像可能包含Joe Random网站无法复制的数据（例如

http://financial.intranet/my/secret/company/financial/chart.png

）只需让访问者的浏览器获取，而不是直接获取

---

这些数据可能受到IP检查、网络路由、HTTP身份验证、Cookie或浏览器可以设置的其他许多安全限制的保护。如果任何网站都可以让访问者的浏览器代表他们提出请求，那么任何网站都可以冒充他们的任何一个访问者并访问机密。

这仍然是毫无意义的，因为我可以在服务器上使用curl获取该图像，这只是更多annoying@thelolcat-如果你能用cURL得到图像，那就好了，但是浏览器不知道你能做到这一点。承载映像的服务器可能会检查浏览器的IP地址，或者需要cookie，或者位于运行cURL的服务器无法访问的intranet上。读取可能有助于OLCAT？