Why this image access loading error on a Promise script fiddle?

Question

I'm using a Promise to load an image in a fiddle and keep getting an access error. I've tried a variety of images - posted to dropbox, placeholders, and others, but all are blocked. What can I use/do that will work? I believe the question and answer here are relevant, but am having trouble connecting the dots.

Here is the error:

XMLHttpRequest cannot load https://www.dropbox.com/s/i7ptcure9tlw8pl/Pensive%20Parakeet.jpg?dl=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.

I'm using the fiddle to practice writing Promises to get my head around them, and have borrowed the script here to practice on. My fiddle in question is here.

The problem is you are tying to do a cross-origin request and dropbox isn't allowing it. The url also points towards a text/html resource and not the image itself. — MinusFour, Jan 23 '16 at 22:56
@MinusFour - Thanks! Is there a resource that will work? ...or do I need to do my experiments locally rather than on JSFiddle? — gromiczek, Jan 23 '16 at 23:00
If you try it with a real image and a site that allows cross-origin requests it [**works**](https://jsfiddle.net/wh41m63c/8/). — MinusFour, Jan 23 '16 at 23:00
@MinusFour - Excellent, thanks! If you write up an answer I'll accept. — gromiczek, Jan 23 '16 at 23:03

score 0 · Accepted Answer · answered Jan 23 '16 at 23:08

As I explained in my comment that URL from dropbox doesn't allow cross-origin requests plus the resource isn't an image (it's actually html). If you use images from a site that allows cross-origin requests (like imgur for example) then it works.

function imgLoad(url) {
    // Create new promise with the Promise() constructor;
    // This has as its argument a function
    // with two parameters, resolve and reject
    return new Promise(function(resolve, reject) {
      // Standard XHR to load an image
      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'blob';

      // When the request loads, check whether it was successful
      request.onload = function() {
        if (request.status === 200) {
        // If successful, resolve the promise by passing back the request response
          resolve(request.response);
        } else {
        // If it fails, reject the promise with a error message
          reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
        }
      };

      request.onerror = function() {
      // Also deal with the case when the entire request fails to begin with
      // This is probably a network error, so reject the promise with an appropriate message
          reject(Error('There was a network error.'));
      };

      // Send the request
      request.send();
    });
  }

  // Get a reference to the body element, and create a new image object
  var body = document.querySelector('body');
  var myImage = new Image();

  // Call the function with the URL we want to load, but then chain the
  // promise then() method on to the end of it. This contains two callbacks
  imgLoad('https://i.imgur.com/Kusegys.jpg').then(function(response) {
    // The first runs when the promise resolves, with the request.reponse
    // specified within the resolve() method.
    var imageURL = window.URL.createObjectURL(response);
    myImage.src = imageURL;
    body.appendChild(myImage);
    // The second runs when the promise
    // is rejected, and logs the Error specified with the reject() method.
  }, function(Error) {
    console.log(Error);
  });

img {
    height:1125px;
    width:750px;
}

Why this image access loading error on a Promise script fiddle?

1 Answers1