Question

"Access-Control-Allow-Origin" error when accessing images stored on spaces served by CDN

Posted March 15, 2020 135 views
DigitalOcean Spaces

I am making a website where you can design custom shoes. I decided that it would probably be smart to start storing all of my images in the cloud instead of on the droplet’s local file system. I did some testing in my development environment and seemingly got it all working. There were no CORS issues and it seemed to be smooth sailing. Then I decided to add a feature where the user can click a button and an image of their design will be downloaded onto their system. This is where it all started to go wrong.

I am using JS canvases to load in the images and construct the shoe design, but JS canvases will not convert to blobs if there are resources from an outside origin on it. To circumvent this issue, I did some research and found that if I set the image’s “crossOrigin” property to “Anonymous”, the issue should resolve itself, but then I started getting CORS errors.

Access to image at 'https://uptownid-dev.nyc3.cdn.digitaloceanspaces.com/shoes/2/shadow/2/shadow.png' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is the function I am using to load my images. (I have tested on local resources and it works.)

loadImage(url, isSpace = true) {
      return new Promise((resolve) => {
        const image = new Image()
        image.onload = () => {
          resolve(image)
        }
        image.crossOrigin = 'anonymous'
        image.src = isSpace
          ? `https://${process.env.BUCKET}.${process.env.CDN}/${url}`
          : url
      })
    }

I then use the traditional ctx.drawImage(.....) to draw them on the canvas.

I used s3cmd to set my CORS policy (so I could use localhost) and this is what it is currently.

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://localhost</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

I have tried a dozen different configurations by now and have put in several hours to try and fix this error, but I cannot figure out how to do it. The weirdest part about it all is that, if I use the regular way of serving files from the spaces instead of the CDN, the image saving feature works without a hitch but an “axios” request to an image elsewhere in my code fails with the same CORS error.

Any help at all would be much appreciated! If you need any other information to help answer my question please let me know

P.S. Sorry if the formatting isn’t great. This is my first question!

edited by MattIPv4
1 comment
  • Quick follow up. I have tested this on several different browsers and found that the header is present on Safari but not on Chrome or Firefox.

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!