Html 工作正常，但是JS Image加载会导致CORS错误。

12 浏览
0 Comments

Html 工作正常，但是JS Image加载会导致CORS错误。

我想用js+jquery创建一个图片编辑器。在第一步中，我要求用户提供图像的URL。但是，当我尝试在JS中加载图像数据（以生成base64图像URI）时，遇到了问题。在控制台中出现错误：…已被CORS策略阻止：Access-Control-Allow-Origin …。但我想知道为什么？如果在HTML文件中，我创建一个图像热链接：浏览器会加载图像而没有任何CORS问题！这是我的JS代码，对于同一张图像，它会出现CORS问题：

function downloadFile(url) {
    console.log({url});
    var img = new Image();
    img.onload = function() {
        console.log('ok');
        // 永远不会执行，因为出现了cors错误
        // …生成用于进一步处理所需的图像数据的base64 uri
    };
    img.crossOrigin = "Anonymous";
    img.src = url;
}

所以问题是 - 如何强制JS加载图像（就像HTML标签加载它）并将其转换为base64 url以避免CORS问题？https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg

0