javascript - 捕获 'Origin is not allowed by Access-Control-Allow-Origin' 错误

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 block 无法工作。有什么方法可以检测错误以便我可以有效地处理它吗？

Answer 1

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

此技术适用于 Canvas 支持的图像。请参阅@Kaiido 的 answer如果你想要一个更简单的替代方案，使用 Image#crossOrigin属性(property)。他的解决方案还会检测该属性是否受支持，并在必要时使用 Canvas 。

// 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 = '/image/Kt3vI.png?s=48&g=1';