Alojo mis fotos en el depósito S3. Agregué la configuración de CORS para el depósito S3:
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <ExposeHeader>Accept-Ranges</ExposeHeader> <ExposeHeader>Content-Range</ExposeHeader> <ExposeHeader>Content-Encoding</ExposeHeader> <ExposeHeader>Content-Length</ExposeHeader> <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>En mi página html, traté de guardar la imagen, así que estoy usando la biblioteca: https://github.com/tsayen/dom-to-image
domtoimage.toBlob(document.getElementById('my-node')) .then(function (blob) { window.saveAs(blob, 'my-node.png'); });Recibí el error CORS:
XMLHttpRequest no puede cargar http://s3/bucket/path/image.png . No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado.
Cualquier sugerencia es apreciada.
Después de una larga depuración, encontré el problema central. Se corrigió toda la configuración de S3 CORS, nada que ver con el S3. El problema provino del almacenamiento en caché del navegador. Este molesto almacenamiento en caché impidió que S3 respondiera al encabezado Access-Control-Allow-Origin 'en respuesta, y es por eso que causó el error.
La solución: (es una solución hacky pero funcionó) agregué una línea de código en el método getAndEncode de dom-to-image.js para evitar el almacenamiento en caché del navegador.
function getAndEncode(url) { ... url += "?"+(new Date()).getTime(); // this line of code made magic. return new Promise(function (resolve) { .... request.open('GET', url, true); ...Nuevamente, esta es una forma de hackear, todavía estoy abierto a cualquier solución mejor.