2

I am trying to get binary data of an image from another domain with an AJAX request. I tried various methods, but there was no working solution. I found some code on the internet that looked good, but even with this calls I get errors.

What do I wrong? Is there a standardized way to do this?

Here is what I tried until now:

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;
}

I even found this solution without ajax here on stackoverflow, but it does not work for me:

Asynchronously load images with jQuery

Here a screen of the properties the error event contains:

The error properties

My goal is to get the binary of an image from a url which I get from an atom feed . I need the binaries to copy the picture to MS SharePoint.

Community
  • 1
  • 1
Philipp Eger
  • 2,235
  • 4
  • 23
  • 34
  • To avoid XY problems, please describe what you actually want to do with the image. Also there is no jQuery in your code but I see a `private` keyword. What version of JS are you on? – mplungjan May 04 '15 at 08:05
  • Look here - http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image – Andriy Struk May 04 '15 at 08:09
  • If you wanna use pure ajax as the code you provided, your image URL needs to append `Access-Control-Allow-Origin` to response header. – Howard Wang May 04 '15 at 08:16
  • 1
    @mplungjan I use typescript, it compiles native to javascript. It uses private/public for function definitions. I removed the jQuery keyword. Added my goal to my question. – Philipp Eger May 04 '15 at 08:41
  • @AndriyStruk Tried this, but I get a javascript error which says "Invalid Character" – Philipp Eger May 04 '15 at 08:44
  • You could try this: http://stackoverflow.com/a/17682424/295783 – mplungjan May 04 '15 at 09:12
  • Or this for jQuery: https://github.com/acigna/jquery-ajax-native – mplungjan May 04 '15 at 09:13
  • to narrow down what's wrong, could you please replace your `request.onerror` function with this: request.onerror = function (error) { alert(error); }; and paste here the error you're receiving? – xionutz2k May 04 '15 at 08:05
  • request.onerror only gives me [object ProgressEvent]. I added a screen with the properties of the error event to my question. – Philipp Eger May 04 '15 at 08:27
  • could you please change it again to alert(error.target.status); to see what's the actual error? Anyway, it looks like a network layer error – xionutz2k May 04 '15 at 08:33
  • alert(error.target.status) is 0. – Philipp Eger May 04 '15 at 08:40
  • It looks like the image you're trying to access is on a different domain. There are two options: if you have access to the server hosting the image, add setRequestHeader("Access-Control-Allow-Origin","*") to your server response. Otherwise, you could try to use a php script in the middle (although this is highly insecure and should not be used for production purposes). The way this could work is: your page sends the image url to the php script via ajax, the script downloads the image via curl or file_get_contents and sends it back to your page via ajax. – xionutz2k May 04 '15 at 08:45
  • Yes, the image is on another domain. Wrote it in the heading of my question ;-) I have no access to the server, it's an Atom feed on customer side. No way to do it without hacking around with php scripts? Should be possible I think. – Philipp Eger May 04 '15 at 08:49
  • sorry, I missed that part. Unfortunately there's no way of doing it with javascript only. – xionutz2k May 04 '15 at 09:07

2 Answers2

2

You cannot get data from another domain unless :

  • the remote server allows it using CORS
  • you run your browser in an unsafe mode.

Reason : otherwise site A would be able to (maliciously) read the user data from site B

basarat
  • 261,912
  • 58
  • 460
  • 511
  • Note that while you cannot *read image data* you can still display it using an `img` tag – basarat May 04 '15 at 10:40
  • Thank you, I know, tried it already. But I need the binaries to upload them in SharePoint. Will speak with the server admin to enable CORS. Seems there is no other chance to do this. – Philipp Eger May 04 '15 at 10:47
0

You must add headers to the method to allow cross domain request. For example, if you are trying to get data from www.example.com/main.php , then you must add headers to allow those method to be called from different domain.

hdkhardik
  • 662
  • 3
  • 22