Cloudflare Developers•2y ago

Download Images from URL

I'm trying to setup a button where I am able to just click a button and download a image from my bucket. It has public access ( you can view the objects in the bucket ) but only through the url and not requests. Anyways I am trying to do this through my website and im getting CORS policy error

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.

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.

I dont really wanna mess with CORS policy or else ima mess something up but is there something im missing or a setting to let you to be able to download images?

10 Replies

elpupperOP•2y ago

BUMP

Erisa•2y ago

You're missing a cors policy and you'll have to set one, not another easy way around that Theres a UI in the R2 dashboard for setting a policy

Erisa•2y ago

Also documentation here https://developers.cloudflare.com/r2/buckets/cors/#add-cors-policies-from-the-dashboard

Configure CORS · Cloudflare R2 docs

Cross-Origin Resource Sharing (CORS) is a standardized method that prevents domain X from accessing the resources of domain Y. It does so by using …

elpupperOP•2y ago

thanks for the reply i recently tried it let me see what i have setup right now

elpupperOP•2y ago

elpupperOP•2y ago

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

i still get the same error this is what my download function looks like

const downloadImage = async (imageUrl: string) => {
        // fetch the image blob without cors issues
        const xhr = new XMLHttpRequest();
        xhr.open('GET', imageUrl, true);
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.responseType = 'blob';
        xhr.onload = function (e) {
            let urlCreator = window.URL || window.webkitURL;
            let imageUrl = urlCreator.createObjectURL(this.response);
            let tag = document.createElement('a');
            tag.href = imageUrl;
            tag.download = 'image.jpg';
            document.body.appendChild(tag);
            tag.click();
            document.body.removeChild(tag);
        }
        xhr.send();
    }

const downloadImage = async (imageUrl: string) => {
        // fetch the image blob without cors issues
        const xhr = new XMLHttpRequest();
        xhr.open('GET', imageUrl, true);
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.responseType = 'blob';
        xhr.onload = function (e) {
            let urlCreator = window.URL || window.webkitURL;
            let imageUrl = urlCreator.createObjectURL(this.response);
            let tag = document.createElement('a');
            tag.href = imageUrl;
            tag.download = 'image.jpg';
            document.body.appendChild(tag);
            tag.click();
            document.body.removeChild(tag);
        }
        xhr.send();
    }

Bobby Donchev•2y ago

AllowedOrigins is not valid. It must be in the following format: scheme://host[:port] (where port is optional)

elpupperOP•2y ago

cant i just use * to allow anyone?

Bobby Donchev•2y ago

you want everybody on the internet to be able to download your content from their own apps? just add your local dev environment in there: http://localhost:8787 and your app DNS: https://yourApp.com add both GET and OPTION as AllowedMethods and you should be good to go

elpupperOP•17mo ago

ok going to give it a try thanks

Gaming

Programming

Download Images from URL