Problem with settings CORS policies on R2

Hello,

I’m using the aws-sdk/client-s3 package for uploading files to my R2 bucket but I have CORS problems. I have tried to set them up using CORSrule and Postman and also I tried using the PutBucketCorsCommand in JS like described in the docs but I still get a “Response to preflight request doesn’t pass access control check: 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.” when trying to use any of the commands the AWS API client proposed.

Anyone has managed to change the CORS of an R2 bucket? My bucket works when uploading files on the server side but I get problems with CORS on the client side.

Any help?

1 Like

I’m having the same issue, setting the CORS policy via boto3 however it’s not working. I’ve verified my CORS by calling Get Cors API and it seems fine.

Hey, here’s an excellent post on configuring CORS on R2: Configuring CORS on Cloudflare R2

Does following this help?

1 Like

Hi. I am getting the same problem. I followed this process exactly but I still get the missing CORS header issue. However, if I try a GET request then it works. I think the issue is specifically with the preflight response to an OPTIONS request. This does not contain the CORS header.

No this doesn’t. As I said the CORS are changed on the bucket but the endpoint you hit is Cloudflare’s endpoint so the CORS problem comes from here, not from AWS. On a normal bucket, without going through Cloudflare’s endpoint, everything works fine. The CORS can be set up. But since you are “proxying” the bucket, it is useless

I followed this tutorial to the letter, and received a 200 OK response from my S3 API endpoint, but the resources from my bucket still do not have the CORS header
access-control-allow-origin: *
that would be required. I wonder if this is a bug on Cloudflare’s side?

I’m investigating this today.

2 Likes

I’m having the same issue. I’ve also set the CORS policy, and checked it by doing a GET on the ...?cors URL, but when I try an OPTIONS request I get a HTTP/1.1 400 Bad Request response with an empty body.

Did you find any solution? I will get the following error message:

Access to fetch at 'https://78fa4b4b59d847246c0bfd2d91be662f.r2.cloudflarestorage.com/' from origin 'https://kimmolinna.static.observableusercontent.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

https://observablehq.com/d/abdc5eae9ecd1428