No voy a mentir, el origen cruzado no me queda muy claro aunque he leído algunos artículos al respecto.

Estaba tratando de 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. Fui a google, stackoverflow, leí algunos artículos y usé el proxy: "https://www.jiosaavn.com" en package.json que obtuve en este artículo: https://medium.com/swlh/avoiding-cors -errores-en-localhost-in-2020-5a656ed8cefa

Solucionó mi problema, las solicitudes de API funcionan bien.

Pero ahora quiero agregar color-thief a mi aplicación.

Hice una publicación reciente al respecto. Funciona cuando uso una imagen de fuentes como unsplash y pexels con el atributo crossOrigin={anonymous} en el elemento HTML de la imagen como este

 <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="landscape" 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é así:

 <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