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-extension，https，chrome-extension-resource。

您获得的错误非常明显。看起来你的脚本试图直接访问你的文件系统并且不允许这样做。

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

检查图像是否存在进入CORS

2 个答案: