为什么在 Promise 脚本 fiddle 上出现此图像访问加载错误？

Question

我正在使用 Promise 在 fiddle 中加载图像并不断出现访问错误。我尝试了多种图像 - 发布到保管箱、占位符和其他图像，但都被阻止了。我可以 use/do 做什么？我相信问题和答案 here 是相关的，但我无法将这些点联系起来。

这是错误：

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.

我正在使用 fiddle 练习编写 Promise 以了解它们，并借用了脚本 here to practice on. My fiddle in question is here。

Answer 1

正如我在评论中所解释的那样，来自保管箱的 URL 不允许 cross-origin 请求，而且资源不是图像（它实际上是 html）。如果您使用来自允许 cross-origin 请求的站点的图像（例如 imgur），那么它就可以工作。

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

为什么在 Promise 脚本 fiddle 上出现此图像访问加载错误？

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

javascript

image

xmlhttprequest

jsfiddle