捕獲“訪問控制允許源不允許源”錯誤

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屬性應該不會壞，所以這個檢查還是可以的。