Estoy experimentando un error de CORS en un sitio web creado con webflow. Básicamente, escribí un script p5.js para dibujar algunas imágenes obtenidas de Webflow CMS, el problema es que cuando cargo las imágenes a través de su URL, a menudo recibo un error que dice: "Access-Control-Allow-Origin no lo permite". ".
Investigué un poco y no pude encontrar una solución a este problema, lo único que parece funcionar es actualizar la página un par de veces.
Así que quería implementar una solución temporal agregando un script js que actualice la página si ocurriera un error CORS. He intentado con esto, pero desafortunadamente, aunque veo el error desde la consola, parece que el script no se activa.
¿Pueden ayudarme a entender lo que estoy haciendo mal?
window.onerror = function(error) { console.log("I detected this error: " + error); location.reload(); };Webflow ha configurado incorrectamente los encabezados CORS (consulte esta discusión de 4 años ). CORS es una función de seguridad a nivel del navegador, por lo que no hay forma de evitarlo por su parte. Webflow debe actualizar su plataforma para adaptarse a la seguridad de Internet moderna, o seguirá fallando cada vez más a medida que los navegadores amplíen la aplicación.
Sin embargo, para responder a su pregunta:
Para capturar por error un dibujo de lienzo bloqueado por CORS, puede hacerlo con el comando dibujar:
try { canvasContext.drawImage( myCrossOriginImage, 0, 0 ); } catch ( e ) { console.error( "Caught a contaminated image, cannot draw it: ", e ); }Dado que este error no se activa en el elemento lienzo, no se propagará al elemento ventana.
Dado que está utilizando p5.js, es probable que el evento de dibujo esté ocurriendo fuera de su código, por lo que esto podría ser difícil, pero inténtelo con su comando 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? }