Cross origin image loading

[alex_h]

Hi, I need to be able to load an image residing on a different server to my code. The image path is specified by the end user so could be anything really. Obviously I need to work around the security restrictions imposed on this use case. The first thing I tried was this:

var img = new Image();img.crossOrigin = "Anonymous";img.onload = function(){    console.log('image loaded')};img.src = <the url provided>;

 

But this results in a security error:

 

No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

I then tried using xhr to load the image like this:

this.loadXHR = function(path){	var xhr = new XMLHttpRequest();	var dot = path.lastIndexOf(".");        var ext = path.substr(dot + 1);        var fileType = null;        if(ext == "png"){            fileType = "image/png";        } else if(ext == "jpg"){            fileType = "image/jpg";         } else {           console.log('unsupported file type! ' + ext);           return        }           xhr.open("GET", path, true);        xhr.responseType = "arraybuffer";        xhr.withCredentials = true;        xhr.send(null);        xhr.onload = function () {            if (this.status == 200 && this.readyState == 4) {                var img = imageBase64(this.response, fileType);        		img.crossOrigin = "Anonymous";                img.onload = function(e) {                    try{                        window.URL.revokeObjectURL(img.src);                    } catch(e){                        //console.log("got an error on revoke")                    }                    console.log('image loaded')                };            } else if (this.status == 404 || this.status == 403) {                console.log("404 ERROR - MISSING IMAGE! " + path)                   }        }}	function imageBase64(response,fileType){    var uInt8Array = new Uint8Array(response);    var i = uInt8Array.length;    var binaryString = new Array(i);    while (i--) {      binaryString[i] = String.fromCharCode(uInt8Array[i]);    }    var data = binaryString.join('');    var base64 = window.btoa(data);    var img = document.createElement('img');    img.src = "data:"+fileType+";base64,"+base64;    return img;}

But I still just get the same error. According to my client they can load the image we're testing with from other content so assuming the content they are testing from really is on a different domain then that suggests the problem is my side, not a server response header issue.

 

Can anyone tell whether I am missing something simple here?

 

Thanks,

Alex

[Gio]

Unfortunately setting img.crossOrigin to 'anonymous' (which should be lower case btw) is not enough - on the server you still need to set the Access-Control-Allow-Credentials HTTP header as far as I know.

[alex_h]

Thanks Gio, I was wondering about the casing, I took the upper case example from MDN but also saw it in lower case in other places while googling. 

I set up a test on jsfiddle in which I just create an image object and load and display it. If I set the image.src to the profile picture from my facebook account which I know has the Access-Control-Allow-Credentials HTTP header then it works - I can see the header response data in dev tools and the image loads and displays. If I switch the src to point to the image on my clients server it doesn't work, I get the security error. Surely this proves they haven't configured their server correctly....