javascript - 尝试使用 Ajax 获取图像时出现访问控制源问题

Question

首先，我尝试通过 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获取图像数据是一样的吗？

Answer 1

So then I tried to get the image like the browser does (GET request),

Canvas 和 XMLHttpRequest 都使用 CORS 来获得跨不同来源访问数据的权限。您请求数据的服务器必须设置 CORS header 才能授予该权限。

I don't understand why does this security limitation thing exists, if the browser can access the image directly? Isn't that the same thing as me getting the image data with javascript?

直接访问图像会将图像显示给用户。

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

该图像可能包含 Joe Random Website 无法仅通过以下方式复制的数据(例如 http://financial.intranet/my/secret/company/financial/chart.png)要求访问者的浏览器获取它，而不是直接获取。

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