Cors issue - how to handle?

[nonoumasy]

Use case: description, code

I'm trying to take several images and compose them together into one image for download. I'm also adding some metadata text on top of each image.

I have a prototype working at: https://csb-te5qjm.vercel.app/

It works partly, but I'm getting CORS issue on some images (from Pinterest, Wikipedia). Just wondering how best to fix this. The cachebust option doesn't work for me. Should I try a proxy server to fix this issue?

Below is my code for the event component(i'm using react).

import domtoimage from "dom-to-image"

const downloadImage = () => {
  domtoimage
    .toJpeg(document.getElementById("event-container"), { cacheBust: true })
    .then(function (dataUrl) {
      var link = document.createElement("a")
      link.download = "my-image-name.jpeg"
      link.href = dataUrl
      link.click()
    })
}

Expected behavior

Actual behavior (stack traces, console logs etc)

I'm getting this error in the console: cannot fetch resource: I'm pretty sure it's a CORS issue and that images from Pinterest or Wikipedia are not being rendered. Images from Twitter however is OK and gets fetched.

Library version

2.6.0

Browsers

• [ x] Chrome 49+
• [ ] Firefox 45+

[mohammad-matini]

@nonoumasy If the CORS errors are happening when dealing with 3rd party websites (Pinterest, Wikipedia, etc.), then there's nothing that dom-to-image can do about that. The 3rd party websites are basically instructing the browser to refuse the requests.

Should I try a proxy server to fix this issue?

Basically, you will need to download the images on a client that will ignore the CORS headers, so, yes, you will need to use a proxy server, or process the images in a back-end service controlled by you instead of in the browser.

[nonoumasy]

thanks @mohammad-matini for confirming this.