0

尝试通过将图像文件拖放到画布上来加载图像文件时出现（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>

谢谢

4

1 回答 1

0

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

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

于 2013-06-25T03:15:39.743 回答