CORS在图像拖放(在dropBox公用文件夹中)时出错-Javascript

Question

我在画布上拖放图像文件时遇到（CORS策略）错误。

错误：跨来源资源共享策略拒绝跨来源映像加载。

这是我加载图像的代码

function loadDroppedImages(listOfImages){
images_Object = [];
var loadchecker = new Array();
for( var i=0;i<listOfImages.length;i++){
    var img = new Image();
    img.crossOrigin = "";
            // To enable CORS as anonymous user
    var fileReader = new FileReader();
    fileReader.onload = function(event){
        img.src =event.target.result;
    }
    fileReader.readAsDataURL(listOfImages[i]);
}
}

我正在通过dropbox公用文件夹运行页面，我想在这里启用CORS。

我的html文档中还有以下几行。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://dropBox/examplePath/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

感谢

Answer 1

是否有理由使用FileReader读取文件？我假设Dropbox公共文件夹没有设置CORS头来允许这样做，所以这个错误在某种程度上是意料之中的。

也就是说，如果你所做的只是在<img>标签中显示图像，为什么不直接将src属性设置为URL，而不是读取代码中的文件呢？