Error de origen cruzado al usar color-thief.
No voy a mentir, el “cross-origin” no está muy claro para mí aunque he leído algunos artículos al respecto.
Estaba intentando obtener canciones de una API que no tiene “Access-Control-Allow-Origin “*”” lo que significa que no pude obtener los datos dentro de mi aplicación. Busqué en Google, Stack Overflow, leí algunos artículos y utilicé “proxy: “https://www.jiosaavn.com”” en package.json que obtuve de este artículo: https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa
Esto solucionó mi problema, las solicitudes a la API funcionan bien.
Pero ahora quiero agregar “color-thief” a mi aplicación.
Hice una publicación reciente al respecto en: https://stackoverflow.com/questions/70548107/colorthief-js-colorthief-is-not-a-function-error. Funciona cuando uso imágenes de fuentes como Unsplash y Pexels con el atributo “crossOrigin={anonymous}” en el elemento HTML de la imagen, así:
<img crossorigin="{anonymous}" ref="{imgRef}" style="{{width:"400px"," objectfit:="" "contain"}}="" src="https://images.pexels.com/photos/1534411/pexels-photo-1534411.jpeg?cs=srgb&dl=pexels-shukhrat-umarov-1534411.jpg&fm=jpg;" alt="paisaje" onload="{()" ==""> {
const colorThief = new ColorThief();
const img = imgRef.current;
const result = colorThief.getColor(img, 25);
console.log(result);
}}
/>
Pero agregar “crossOrigin={anonymous}” hace que la imagen no se cargue (que obtengo de la API).
Si te preguntas por qué no lo usé de esta manera:
<img src="{currentSong.image}" ref="{imgRef}" alt="Songimg" onload="{()" ==""> {
const colorThief = new ColorThief();
const img = imgRef.current;
const result = colorThief.getColor(img, 25);
console.log(result);
}}
/>
entonces, me muestra esto:
SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data
davy.ai
Cross-Origin Resource Sharing (CORS) es una característica de seguridad implementada por los navegadores web para evitar que los sitios web realicen solicitudes a un dominio diferente (origen) al que se sirvió el sitio web. Cuando se solicita un recurso (como una imagen o un punto final de API) desde un origen diferente, el navegador debe verificar si el servidor de destino permite la solicitud. Si el servidor no lo permite, el navegador bloqueará la solicitud y se producirá un error.
En este caso, el punto final de la API desde el que intentas obtener canciones no tiene el encabezado Access-Control-Allow-Origin configurado para permitir cualquier origen (*). Esto significa que tu navegador bloqueará las solicitudes realizadas desde tu aplicación a ese punto final de la API. Para evitar esto, puedes utilizar una técnica llamada “proxy CORS” en la que realizas la solicitud a un servidor proxy, que luego realiza la solicitud al servidor de destino y reenvía la respuesta a tu aplicación.
Puedes configurar un proxy CORS agregando el campo
proxyen tu archivopackage.jsony apuntándolo a un servidor proxy. Esto interceptará cualquier solicitud realizada a tu host local y las enviará al servidor proxy configurado antes de llegar al servidor de destino.Sin embargo, cuando agregas el atributo
crossOrigin={anonymous}a un elementoimg, el navegador enviará una solicitud con el encabezadoOrigin: null, lo que desencadena una solicitud de preinicio de CORS en el lado del servidor. Si el servidor no responde con el encabezado Access-Control-Allow-Origin configurado como * o el dominio de origen de la solicitud, el navegador no permitirá que se acceda al recurso y se producirá un error.En tu caso, es posible que el punto final de la API no admita solicitudes de preinicio de CORS con origen nulo o intercambio de recursos entre dominios. Como resultado, no puedes agregar el atributo
crossOrigin={anonymous}al elemento de imagen y utilizarlo con la biblioteca ColorThief.Una forma de solucionar este problema es descargar los datos de imagen en el backend de tu aplicación y servirlos desde allí. De esta manera, los datos de la imagen serán del mismo origen que tu aplicación y no desencadenarán un error de CORS. Otra opción es utilizar un servidor proxy que admita solicitudes de preinicio de CORS y pueda reenviar los datos de imagen a través de él antes de enviarlos de vuelta a tu aplicación.
En general, Cross-Origin Resource Sharing es una característica de seguridad poderosa que evita que los sitios web maliciosos realicen solicitudes a recursos sensibles, pero también puede causar problemas cuando necesitas acceder a recursos de otros dominios. El uso de un proxy CORS o servir el recurso desde tu backend son formas comunes de evitar este problema.