使用 AJAX 请求从另一个域获取图像数据

Question

我正在尝试使用 AJAX 请求 从另一个域获取图像的二进制数据。我尝试了各种方法，但没有有效的解决方案。我在互联网上找到了一些看起来不错的代码，但即使使用此调用我也会出错。

我做错了什么？有没有标准化的方法来做到这一点？

这是我到目前为止尝试过的方法：

var request = this.createCORSRequest('GET', 'http://url/to/image.png');
request.onload = function () {
    var text = request.response;
};
request.onerror = function (error) {
    alert('Woops, there was an error making the request.');
};

request.send();

private createCORSRequest(method, url) {
        var xhr: XMLHttpRequest = new XMLHttpRequest();
        if ("withCredentials" in xhr) {

        // Check if the XMLHttpRequest object has a "withCredentials" property.
        // "withCredentials" only exists on XMLHTTPRequest2 objects.
        xhr.open(method, url, true);

        } else if (typeof XDomainRequest != "undefined") {

            // Otherwise, check if XDomainRequest.
            // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
            var xdhr = new XDomainRequest();
            xdhr.open(method, url);

        } else {

            // Otherwise, CORS is not supported by the browser.
            xhr = null;

        }
        return xhr;
}

我什至在 Whosebug 上找到了这个没有 ajax 的解决方案，但它对我不起作用：

Asynchronously load images with jQuery

这里是错误事件包含的属性的屏幕：

我的目标是从我从 atom feed 获得的 url 中获取图像的二进制文件。我需要二进制文件将图片复制到 MS SharePoint。

Answer 1

您无法从其他域获取数据，除非：

远程服务器允许它使用 CORS
您运行您的浏览器处于不安全模式。

原因：否则站点 A 将能够（恶意地）从站点 B 读取用户数据

Answer 2

您必须在方法中添加headers以允许跨域请求。例如，如果您尝试从 www.example.com/main.php 获取数据，则必须添加 headers 以允许从不同域调用这些方法。

使用 AJAX 请求从另一个域获取图像数据

Get image data from another domain with AJAX request

javascript

ajax

cross-domain

typescript