@siddhant1 I’ve had to resort to the fix by @giorgio.scavuzzo to be able to retrieve images from R2 as array buffers using fetch. I have configured the allowed domains using the UI but without the aforementioned fix, it still wouldn’t work.
I am unable to edit my post above so I’m posting the fix here.
The reason I was facing CORS errors was because was loading the same image separately using an img tag. The browser was caching that request which did not have the required CORS headers, resulting in an error. I fixed it by simply adding crossorigin=“anonymous” to the img tag so that the cached image request has the required CORS headers.
i tried to apply CORS from R2 dashboard, with custom domain settings, And I added the file to the website which I have set in AllowedOrigins"(in this case I tried the .mp4 file).And I get error’ 400 response in browser console.
My issue is exactly like @robson’s: The OPTIONS (preflight) request gets a 204 response with Access-Control-Allow-Origin: *, which is what I had set in the CORS policy. So far, so good. However, the subsequent POST request gets back a 400 and doesn’t have any CORS headers. (Also, explicitly enumerating allowed headers like the above comment suggests, doesn’t help).
We are using POST, not PUT, because some options that we need (such as dynamic conditions on the upload path and content type, such as ["starts-with", "$key", "user/user1/"]) are only available with POST requests (AWS docs https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-HTTPPOSTConstructPolicy.html and https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html).
Could it be that the R2 doesn’t implement this (POST) endpoint at all (yet)?
I see you added a lot of docs since I last looked into this, and also a CORS policy editor (thanks for that, it saves a lot of messing around with cURL and Postman ). I’ll take another look at the docs to see if there’s anything you added there that may provide some hints.
Hey folks, sorry I haven’t been following this thread very closely.
It sounds like a lot of people are trying a presigned POST requests, which are not supported currently, unfortunately (this is now documented, thanks for pointing this out!).
I understand that debugging CORS policies can be hard because you do not control the “server” / CORS headers aren’t usually very helpful. We added this section to our docs that also explains how to set up CORS for object uploads via presigned URLs: Configure CORS · Cloudflare R2 docs , which should make things clear(er). If there are things you’d want added here, please reach out.
If you still run into issues, I’ll be happy to debug things with you on Discord: Cloudflare Developers, just shout in the r2-storage channel.
@rtopuz What would also help is showing me what request you’re sending out. CORS policies are just one half of the setup