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

Posted 2023-03-24

【中文标题】使用 Javascript 检查是不是发生 CORS 错误

【英文标题】：check if a CORS error is occuring using Javascript使用 Javascript 检查是否发生 CORS 错误

【发布时间】：2021-11-21 09:04:21

【问题描述】：

我在使用 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();
;

【参考方案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?

【讨论】：

我已经尝试在不同的位置添加 try/catch（加载图像、绘制图像...），但是当 CORS 错误仍然存​​在时，我看不到 console.error 跨度>

不幸的是，这可能意味着 p5.js 在单独的事件循环中执行 context.drawImage()（例如，通过使用 requestAnimationFrame）。如果不修改 p5.js，您将无法捕获该错误。

但是，我不建议修改 p5.js。这里的基本问题是 Webflow 的 CORS。在您的代码中很难解决这个问题。即使你今天修复它，它也可能在下周再次被破坏，因为更多的 Webflow 出现故障。请尝试以其他方式加载图片。

所以我应该在 webflow CMS 之外加载图像，我可以在不获取 CORS 的情况下访问，对吧？或者我可以重写代码以使用 context.drawImage() 而不是使用 p5.js

绘制图像

我建议在外面加载图片。使用 context.drawImage() 仍然会因 CORS 问题而中断，即使您可以发现错误。我不知道你的设置。例如，将mypic.jpg 放在您网站的某个位置，例如https://example.com/myapp/img/mypic.jpg，然后将该位置传递给loadImage()。或者，您可以convert your entire image to a URI。 URI 的工作方式与 URL 完全相同，但它真的 长并且包含整个图像数据。这样，您可以将图像作为文本粘贴到 javascript 文件中。