图片删除（在dropBox公用文件夹中）时出现CORS错误-Javascript

Question

I am getting an (CORS policy) error while trying to load an image file by dragging and dropping it on the canvas.

Error : Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Here is my code to load Image

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

}

I am running the page through dropbox public folder and I want to enable CORS here.

I also have following lines in my html document.

<?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>

Thanks

Answer 1

Is there a reason you have to read the file with FileReader ? I assume that Dropbox public folders don't set the CORS headers to allow this, so the error is somewhat expected.

That said, if all you're doing is displaying the image in an <img> tag, why don't you just set the src attribute to the URL directly, instead of reading the file in code?