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

Question

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

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

然而，我得到了以下错误：

CORS策略阻止了从源“http://localhost:53594”访问“http://xxxxxxx.com/testpicture.jpg”上的映像：请求的资源上没有“access-control-allow-origin”标头。

我使用了“匿名”交叉起源声明，应该可以解决这个问题，但它似乎没有造成任何影响。

知道吗？

编辑：我删除了交叉起源声明，问题就没有了。现在看来，引起问题的代码行是canvas.todataurl。

Answer 1

您是否尝试从本地访问到服务器端？有些设置看起来像是从运行端保留本地或服务器。