I'm experiencing a CORS error on a website made with webflow. Basically, I wrote a p5.js script to draw some images fetched from Webflow CMS, the problem is that when I load the images through their URL I often get an error that says: "is not allowed by Access-Control-Allow-Origin".
I did some research and I couldn't find a solution to this issue, the only thing that seems to work is refreshing the page a couple of times.
So I wanted to implement a temporary solution adding a js script that refreshes the page if a CORS error happened. I've tried with this but unfortunately, even though I see the error from the console, it seems like the script is not triggered.
Can you help me understand what I'm doing wrong?
window.onerror = function(error) {
console.log("I detected this error: " + error);
location.reload();
};Webflow has wrongly configured CORS headers (see this 4-year long discussion). CORS is a browser-level security feature, so there is is no way around it from your end. Webflow must update their platform to conform to modern Internet security, or it will continue to fail more and more often as browsers expand enforcement.
However, to answer your question:
To error-catch CORS-blocked canvas drawing, you can do so at the draw command:
try {
canvasContext.drawImage( myCrossOriginImage, 0, 0 );
} catch ( e ) {
console.error( "Caught a contaminated image, cannot draw it: ", e );
}
Since this error does not fire on the canvas element, it will not propagate to the window element.
Since you are using p5.js, the draw event is probably happening outside your code, so this might be difficult, but please try it at your image() command.
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?
}