CORS problems

[Gamewise]

Hi there!

I'm having trouble downloading all cross-origin images. Some urls seem to work and some don't and I'm getting CORS errors.

I can get most images to display on my website, but not all seem to work with modern-screenshot?

Here's an example I can't get to work:

HTML (in Vue 3):

 <button @click="downloadPNG('#zone-0')">download</button>
  <div id="zone-0" 
      style="background: url("https://vitapet.com/media/kczlgn0r/dog-breed-temperaments-1240x640.jpg?fbclid=IwAR2-X8mY96qxVPULvY8zMDmXG8vTyeXP_zbqvjbhjABDDEy82bQUmye-l9I")>
      </div>

JAVASCRIPT

const downloadPNG = async (el) => {
  let div = document.querySelector(el)
  dataURI.value = await domToPng(div,
    {
      scale: 2,
      debug: true,
      fetch: {
        requestInit: {
          mode: 'cors',
        },
        bypassingCache: true,
      }
    }
  ).then(dataUrl => {
    const link = document.createElement('a')
    link.download = 'screenshot.png'
    link.href = dataUrl
    link.click()
    link.remove()
  })
}

What would the minimum code be for downloading a png of a div with a cors background image like that one above?

Thanks so much.

[hdlgo]

how did u resolve it

[Gamewise]

I didn't sorry. I just didn't use it with other sites in the end.

[xsploit]

anyone have any luck im using function downloadScreenshot(element) { const fetchOptions = { requestInit: { mode: 'cors', }, bypassingCache: true, };

            // Use modern-screenshot to capture the image with fetch options
            modernScreenshot.domToPng(element, { fetch: fetchOptions }).then(dataUrl => {
              const link = document.createElement('a')
              link.download = 'screenshot.png'
              link.href = dataUrl
              link.click()
            })

            -and the image isnt showing up in the screenshot

[jacobvanschenck]

What worked for me was using "no-cache":

  return await domToPng(node, {
    fetch: {
      requestInit: {
        cache: "no-cache",
      },
    },
  });

[zhoushan1]

I also encountered this problem, how did you solve it?

[matsuyama-k1]

I encountered the same issue in Next.js. When I try to take screenshot with image that pass from S3 presigned url, I encountered CORS error otherwise I set CORS correctly.

Access to fetch at 'https://~~~.s3.~~~.amazonaws.com/~' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

no-cache is worked for me too. (@jacobvanschenck way)

I suspect the issue might be caused by image caching server. The problem could be that the CORS settings are not properly configured on the image cache server.