CORS issue with R2 ( calling from localhost )

Developers API
1

For Workers & Pages, what is the name of the domain?

No domain involved

What is the error number?

What is the error message?

What is the issue or error you’re encountering

CORS ISSUE

What steps have you taken to resolve the issue?

Added cors policies on the bucket with allowed headers and origins to * but not working.

What are the steps to reproduce the issue?

I’m trying to make a PUT request to the cloudflare r2 bucket from my react client ( localhost:3000) with a pre signed url coming from the back end that is using amazon s3 sdk but unfortunately it doesn’t work because it fails with a cors issue.

Access to fetch at ‘https://pulse-dev.c30bce9fbb49a0d96e7152008a0858a0.r2.cloudflarestorage.com//USERS/e43146cc-19a5-44ae-a82c-811c025c3ef9/angel-20250105_193215.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20250105T173215Z&X-Amz-SignedHeaders=host&X-Amz-Credential=38af19e5395a8cd1ab93ee859eb6acbf%2F20250105%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=10&X-Amz-Signature=00fd8754670f99dd91b97edb66cada474107793674fbf48c50db142ea3d4dcd1’ 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.

2

May I ask if you are going to use a custom domain, or rather sub-domain, or not at all for the particular R2 bucket? :thinking:

Connect the custom domain to your R2 bucket, then add the missing Access-Control-Allow-Origin HTTP header by using Transform Rules → Modify Response Header as follows:

slika
slika1126×1114 31.3 KB

Helpful article with the step-by-step instructions how to create one:

Otherwise: