I'm not gonna lie, cross-origin is not very clear to me although I've read some articles about it.

I was trying to fetch songs from an api which does not have Access-Control-Allow-Origin "*" meeans i couldn't get the data inside my app. I went to google, stackoverflow, read some articles and used the proxy: "https://www.jiosaavn.com" in package.json which i got in this article: https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa

It did fix my issue, api requests are working fine.

But now I want to add color-thief to my app.

I made a recent post about it. It works when I use image from sources like unsplash and pexels with attribute crossOrigin={anonymous} on the image HTML element like this

<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);
        }}
/>

But adding crossOrigin={anonymous} makes the image fail to load (which I'm getting from the api).

If you're wondering why I didn't use it like this:

<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);
            }}
          />

then, it shows me this:

SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data