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加载是async＆amp;因此捕获块不会工作。有没有办法检测错误，以便我能有效地处理它？</ p>

Answer 1

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

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

// 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，如果失败，则意味着另一只手未正确配置。

＆＃13;

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

＆＃13;

- * 实际上，只需要完全下载图像，所有其他资源都可以在结束前进行测试。

Ps：在同源请求的情况下，crossOrigin属性不应该受到伤害，因此仍然可以执行此检查。

Access-Control-Allow-Origin＆＃39;不允许捕获原点。错误

2 个答案: