尝试访问跨域URL图像时出现Javascript CORS问题

我有以下功能将图片的较小版本合并到其自身的较大版本：

function mergeImages(imgref) {
    var canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 500;
    var ctx = canvas.getContext("2d");
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#000";
    ctx.fill();

    var myImage = new Image();
    var myImage2 = new Image();
    //myImage.crossOrigin = 'anonymous';
    //myImage2.crossOrigin = 'anonymous';
    myImage.src = imgref;

    myImage.onload = function () {
        console.log('load1')
        ctx.drawImage(myImage, 0, 0, 500, 500);
        myImage2.src = imgref;
        myImage2.onload = function () {
            console.log('load2')
            ctx.drawImage(myImage2, 100, 100, 400, 400);
            var img = canvas.toDataURL("image/png");
            return img;
        }
    }
}

但是，我得到以下错误：

访问位于'http://xxxxxxx.com/testpicture.jpg“起源”http://localhost:53594'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。

我使用了“匿名”跨源声明来解决这个问题，但它似乎没有产生任何影响

有什么想法吗

---

编辑：我删除了crossOrigin声明，问题就解决了。现在看来，引起问题的代码行是canvas.toDataURL

这是否回答了您的问题？Access Control Allow Origin是一个响应头，不能强制服务器使用它进行响应

crossOrigin

属性仅当确实允许图像在服务器上共享crossOrigin时才解决污染问题。我不确定CORS是否适用于图像？我不记得我在请求其他域的图像时遇到过任何问题，请检查这篇文章，它可能有助于@Teemu Aha，我明白了，所以我从其他域加载的所有图像都是该其他域上的服务器允许的？谢谢。您可以从跨来源加载任何图像，甚至可以将其显示在页面上，但如果服务器未明确接受，则无法访问跨来源图像的数据。看啊。。。会计师已经把那篇MDN文章。。。