CORS Error when trying to fetch image from GhostAPI

Developer help
1

Hi ,
I’m using ghost API in my website where I display blogs from ghost Platform.
I’m trying to fetch the Image of my blog for SEO purpose but I’m Facing CORS error while doing so.
Here is my fetch code and a example image I’m trying to fetch.

Code:

 const response = await fetch("https://dangdi.ghost.io/content/images/size/w1600/format/avif/2023/05/Screenshot-2023-05-31-083805.png"), {
  headers: {
      Origin: window.location.origin,
      "Access-Control-Request-Method": "GET",
      "Access-Control-Request-Headers": "Content-Type",
      "sec-fetch-dest": "image",
    },
});

Error:
Screenshot from 2023-07-18 12-19-41

2

Try adding mode: "cors" to your fetch request.

 const response = await fetch("https://dangdi.ghost.io/content/images/size/w1600/format/avif/2023/05/Screenshot-2023-05-31-083805.png"), {
   mode: "cors",
   headers: {
      Origin: window.location.origin,
      "Access-Control-Request-Method": "GET",
      "Access-Control-Request-Headers": "Content-Type",
      "sec-fetch-dest": "image",
    },
});

If it’s still not working, check that you don’t have a reverse proxy set up to protect images from hot-linking, and temporarily turn off any and all proxying setting you might have on. (I think Cloudflare offers hotlink protection this as a configurable option on their domains.) If that fixes it, then you’ll know that the problem is there and you can try to fix the configuraiton.