捕获“访问控制允许源不允许源”错误

Question

img = new Image();

img.crossOrigin = "anonymous";

try {
    cimg.src = document.getElementById("url").value;
}
catch(err) {
    alert("Cannot access image.Cross-Domain access blocked");
};

所以，我想检测/捕获跨域访问阻止错误。

经过一番思考，我发现它的 src 加载是异步的，因此 catch 块不起作用。 有什么方法可以检测错误，以便我可以有效地处理它？

Answer 1

正如@TamasHegedus 评论的那样，图像仍然可以加载 CORS 错误，但它不允许操作图像数据。 这意味着您可以使用画布来尝试操作图像并捕获任何抛出的错误。

这种技术适用于画布支持的图像。 如果您想要使用Image#crossOrigin属性的更简单的替代方案，请参阅@Kaiido的答案。 他的解决方案还会检测该属性是否受支持，并在必要时使用画布。

// Must work in IE9+.

var img = new Image;

img.onload = function() {

    var canvas = document.createElement('canvas');

    // resize the canvas, else img won't be rendered
    canvas.width = img.width;
    canvas.height = img.height;

    // get the canvas rendering context 2d
    var ctx = canvas.getContext('2d');

    // draw the image first
    ctx.drawImage(img, 0, 0);

    try {
        /* get first pixel */
        ctx.getImageData(0, 0, 1, 1);

        /* no error catched – no cors error */
        alert("Cross-domain access available.");

    } catch (e) {
        alert("Cross-domain access blocked.");
    }
};

img.src = 'https://i.stack.imgur.com/Kt3vI.png?s=48&g=1';

Answer 2

在支持 crossOrigin 请求的浏览器中（应该是首选请求），如果您将crossOrigin设置为'anonymous' ，并尝试将元素的src设置为指向托管在设置不当的服务器上的文件，则load事件不会火，取而代之的是一个error事件。

重要的是要了解，在 crossOrigin 请求失败的情况下，服务器将直接回答它不接受请求，因此您的用户和远程服务器之间只会发送标头，而反过来（首先尝试不使用 crossOrigin 请求，然后尝试使用)，您必须首先完全下载*资源，然后使用设置的 crossOrigin 属性再次下载...

这同样适用于音频、视频和 xhr 请求。

所以首先应该设置跨域请求的crossOrigin，如果失败则说明另一只手没有正确配置。

 var img = new Image(); if('crossOrigin' in img){ // an up to date browser // make a single crossOrigin request img.crossOrigin = 'anonymous'; img.onerror = handleCORSFailure; } else{ // for browser that don't support the crossOrigin request var ctx = document.createElement('canvas').getContext('2d'); ctx.width = ctx.height = 1; // no need to use too much memory, 1*1 px is enough img.addEventListener('load', function(){ ctx.drawImage(this,0,0); try{ ctx.getImageData(0,0,1,1); } catch(e){ handleCORSFailure(e); return; } }); } img.src = 'https://i.stack.imgur.com/Kt3vI.png?s=48&g=1'; function handleCORSFailure(e){ if(e.target){ console.log('server not set correctly'); } else{ console.log("browser doesn't support crossOrigin requests"); } }

-*其实，只需要下载完整的图片，其他资源都可以在结束前测试。

ps：如果是同源请求，crossOrigin属性应该不会坏，所以这个检查还是可以的。