使用 Javascript 检查是否发生 CORS 错误

Question

我在使用 webflow 制作的网站上遇到 CORS 错误。基本上，我编写了一个 p5.js 脚本来绘制一些从 Webflow CMS 获取的图像，问题是当我通过它们的 URL 加载图像时，我经常收到一个错误消息：“Access-Control-Allow-Origin 不允许”。

我做了一些研究，但找不到解决此问题的方法，唯一可行的方法是刷新页面几次。

所以我想实现一个临时解决方案，添加一个 js 脚本，以在发生 CORS 错误时刷新页面。我已经尝试过了，但不幸的是，即使我从控制台看到错误，脚本似乎也没有被触发。

你能帮我理解我做错了什么吗？

window.onerror = function(error) {
  console.log("I detected this error: " + error);
  location.reload();
};

Answer 1

Webflow 错误地配置了 CORS 标头（请参阅 this 4-year long discussion）。 CORS 是一种浏览器级别的安全功能，因此您无法绕过它。 Webflow 必须更新他们的平台以符合现代 Internet 安全性，否则随着浏览器执行力度的扩大，它会继续出现越来越多的故障。

但是，回答您的问题：
要错误捕获 CORS 阻止的画布绘图，您可以在 draw 命令中执行此操作：

try {
    canvasContext.drawImage( myCrossOriginImage, 0, 0 );
} catch ( e ) {
    console.error( "Caught a contaminated image, cannot draw it: ", e );
}

由于此错误不会在画布元素上触发，因此不会传播到窗口元素。

由于您使用的是 p5.js，因此绘图事件可能发生在您的代码之外，因此这可能很困难，但请在您的 image() 命令中尝试。

try {
    image( myCrossOriginImage, 0, 0 );
} catch ( e ) {
    console.error( "Caught a contaminated image, cannot draw it: ", e );
    //instead of reloading the page, please try drawing a different image?
}