检查是否存在运行CORS的映像

Question

我正在尝试使用以下功能检查图像是否存在，但一直遇到CORS错误。 这些图像不是从服务器发送的，因此无法添加常规的Access-Control标头。 这些图像位于本地文件夹中，我只需要检查是否存在指定的图像。

当前代码：

function isInFolder(url)
    {
      var http = new XMLHttpRequest();
      http.open('HEAD', url, false);
      http.send();
      return http.status!=404;
    }

错误：

scripts.b0f3172f.js:1 XMLHttpRequest cannot load file:///Users/robertgrzesik/Documents/Development/AngularJS/Templates_Base/dist/assets/product1/content1/info/1.png. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

我想做的逻辑：

// Assets can be images or videos
if(isInFolder(myAsset)) {
  myAssetArray.push(myAsset);
}

Answer 1

最终成为执行此操作的最佳解决方案（没有Web服务器）：

      var fileURL = "assets/"+scope.productDirectory+"/content1/info/"+x+".png";
      imageExists(fileURL, function(exists, url) {
        if(exists) {
          scope.contentOneSequence.push(url);
        }
      });

     function imageExists(url, callback) {
      var img = new Image();
      img.onload = function() { callback(true, url); };
      img.onerror = function() { callback(false, url); };
      img.src = url;
    }

Answer 2

跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https，chrome-extension-resource。

您遇到的错误是不言自明的。 看来您的脚本正在尝试直接访问文件系统，而这是不允许的。

您应该使用本地开发网络服务器来提供资产。