hey guys, i'm trying to add a custom domain i own (authoritative DNS provider is CF, registrar is foreign) in order to switch a bucket to Public access, but this is the error i get .... can't even find many resources on the web ..

Do you already have a DNS record for the (sub)domain you're trying to add? I don't think we replace existing records (although we probably should...)

1st pic are my dns records ; 2nd pic is the record r2 is trying to set. i don't get why

You already have a DNS record set up there. You need to remove the pages.dev one and then re-add the R2 bucket. Keep in mind that if you remove the pages.dev one your pages site will no longer be displayed on that domain.

You can also set up the R2 bucket on a subdomain, like

cdn.firbuddy.com

, to keep your site but still make the R2 bucket accessible from the web.

Is there any reason why I would be getting a CORS error when trying to access the public R2 link for a video, from my Pages app If relevant, this is a preview branch, so the actual requesting URL looks more like

feature.my_app.pages.dev

CORS origins must be exact

i.e

example.com

doesn't allow

foo.example.com

i hate CORS, thank you so much

i feel this is the easiest path... are there downsides using this approach ?

thank you so much @Sid | R2 & @zegevlier

Some minor ones, since you have a different hostname it will set up a new TCP socket when requesting from it, so it will be ever so slightly more latency for the first request to your R2 bucket

And you might need to set up CORS headers, but that's a one time thing

In order to do the first option i should change my CNAME records to not point to firbuddy.pages.dev ? How could i do that if my pages website is deployed to that domain ? Should i deploy another pages project called "notfirbuddy"?

I’d say unless you have a reason to serve large files, you can also just let Pages take care of file serving (like, if this just a website)

You can’t really solve that, because both Pages and R2 can’t listen on the same domain currently.

Well I guess unless you can whip something up with transform rules, but TBH I’m no expert there

Would be a full app where users can upload photos and stuff like that, so not a basic website

Interesting, thanks again. Have to say that overall cloudflare is a really nice provider, good job guys 👍

Does CORS still apply with pre-signed URLs? I'm trying to initiate to have my NextJS application trigger a download for the user of a file from my R2 bucket via XHR (so it uses the browsers native download progress indicator):

ts
  const handleVideoDownload = () => {
    const xhr = new XMLHttpRequest();
    const fileName = videoURL.split('/').pop();
    xhr.open('GET', videoURL);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      const url = URL.createObjectURL(xhr.response);
      const anchor = document.createElement('a');
      anchor.href = url;
      anchor.download = fileName || '';
      document.body.appendChild(anchor);
      anchor.click();
      document.body.removeChild(anchor);
      URL.revokeObjectURL(url);
    };
    xhr.send();
  };

but I get a CORS error:

Access to XMLHttpRequest at '<link>' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What is your CORS policy?

Sometimes you get unlucky and CORS rule propagation can take a few seconds, try waiting a bit?

I haven't changed it since a week or two ago

Try

*

for Allowed Origins, I guess?

Just to debug

oh wow, that's so strange

so it didn't seem to be a CORS issue

it was an error with something else in the chain, but for some reason showed as a CORS issue

No 'Access-Control-Allow-Origin' header is present on the requested resource.

means exactly that, the header wasnt on the response - whether thats because the header went missing or because the request never made it where it was supposed to go, who knows