CORS
hey there folks, I'm trying to use Livewire's tmp upload feature and getting a 403 CORS error on the options call. I do have a CORS policy set to my public bucket. Is this supported right now in R2?
77 Replies
Can you show me the request that’s going out? Ideally a screenshot of your browser’s DevTools, since there are no secrets involved.
sure, one sec, let me enable that feature again
I also notice your region is set to us-west-1, which won’t work. Can you also show me how you’re generating your URL?
Best set the region to “auto”
what region should I use? the article I read said region didn't matter
kk, changing now, maybe that will make it work
The default of us-East-1 maps to auto automatically, but generally just using auto is best!
ah I had left it where I had it when I was trying S3, changing now and enabling that tmp folder feature of livewire, one moment
thanks for helping
ok same errors
Is the OPTIONS returning a 200?
nope 403
Right, so this points to a signature verification error
Can you try
cURLing your presigned URL? Does that work?this works when it's local
let me try
The request signature we calculated does not match the signature you provided. Check your secret access key and signing method. I just noticed you using the
x-amz-acl param as well, which isn't supported at the moment: https://developers.cloudflare.com/r2/api/s3/api/
But your bucket stays private by default, so you should be able to just drop itS3 API compatibility · Cloudflare R2 docs
R2 implements the S3 API to allow users and their applications to migrate easily. When comparing to AWS S3, Cloudflare has removed some API …
ah, this whole thing is done by Laravel, not sure I have control of this
guess we can't use R2 w/ Laravel, which is a shame
well it's done by the s3 package Laravel uses, I imagine
Give me juuust one sec, I just want to confirm if that header breaks Sigv4 or if we just ignore it. I think we might just ignore it
kk, thanks
Hm so we ignore it, which means this should work. What does your CORS policy look like?
fyi this is the code generating this url, it's from the amazon package, I believe
my cors is correct, I think, but let me get it for you
we really really really REALLY want to use R2 for this, so this would be sad if we couldn't
we use CF for everything!
Can you add your
https://<accountId>.r2.cloudflarestorage.com domain to this list?
I'm pretty sure this will work FWIW!sure
kk added, retrying
got a 403 again
Oh I'm sorry, I see you're using the hostname style of addressing your bucket, so you'd need
https://<bucket>.<accountId>.r2.cloudflarestorage.com
Sorrykk, trying again
Basically you need the hostname you're making the request from to this list.
Aaand Im just realizing the
*.r2.cloudflarestorage.com domains won't do anything (it's late here...)
You're making the request from
http://fit.test I presume? Not `https://fit.test?ya there miiiight be a port involved, but it's not showin the referer
No I think you're good, your origin is in fact
http://fit.test
Alright time to open up the codebase, one sec
Do you mind sending me your URL in text so I can try hitting it as well? (And hopefully you don't mind if I succeed in upload some random object? You can just delete it)
nope this is all test
what url, the r2 one?
The presigned URL
https://fitco.a7214c5f6e36dff5ea70da5d02409d4e.r2.cloudflarestorage.com/livewire-tmp/t51ouMXhGjguCFYHI9u9PQOQd13aZU-metaZXJpbi0wMi5qcGc%3D-.jpg?x-amz-acl=private&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=27cf266877bfb1ec1ce0d4ca1c4cef4b%2F20230423%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20230423T221712Z&X-Amz-SignedHeaders=host%3Bx-amz-acl&X-Amz-Expires=300&X-Amz-Signature=fec67c82dafb009751644475701c46d6a6d6e2223d501eb964bcb099cf821d3e
might be out of time though, go fast, I can make another one...you only have 5 minsOh okay yeah can you create a new one then? 😛
Give it like a hour or something?
I can't change that I don't think, let me see
maybe it's a day, not sure on the code path, sorry
none of this code is mine, it's all in various packages
Oh that's fine then, I'll just try and do this on a bucket I own. I'm pretty sure I've had this work in the past
I was using this article: https://medium.com/@antoine.lame/cloudflare-r2-storage-with-laravel-in-5-minutes-553a5403c6f8
and I've made my bucket public
(though I don't know if I need that yet.....)
That's okay! I'll get this to work and then we can see what's different in our setups
and I"m using Livewire: https://laravel-livewire.com/docs/2.x/file-uploads#basic-upload
Yeah you don't need to make th bucket public if you're using presigned URLs
that presigned is only for the temp preview image
Oh I have like zero experience with PHP so that's all gibberish to me haha
of course!
This URL is for uploading an object right?
that url is for getting the temp url for the preview image, before the image is actually uploaded
so it temporarily uploads to a temp folder, generates a temp url, then you can use that show a preview image
then on save, we actually try to store it on R2
if set the preview stuff to local, but try to store the image, it would likely work
I see, so this issues a GetObject essentially? (Just trying to make sure I generate the same URL on my end)
dunno sorry, I could walk through the code, gimme a sec
like i said, not my code
actually a put
I say that because there should be a
x-id param in there
but the call that's failing is an OPTIONS
Oh derp, right
iut's a signature issue still
it's an OPTIONS call
Right yeah, I'm just being stupid, just gimme a few mins
if I make that temp folder/signed url thing local and not using s3, then the upload works perfectly
(name is wrong, no extension, yadda yadda, but it IS there)
so it's only the OPTIONS call that's a problem
Okay so I think the issue is that your preflight request contains an
Access-Control-Request-Headers header, and your CORS policy doesn't have a corresponding AllowHeaders.
I'm able to repro this as well, but I'm not 100% sure if my setup is the same as yours, so can you try adding a AllowedHeaders: ["content-type", "x-amz-acl"] to your CORS polcy? (You can also remove the *.cloudflarestorage.com origins from there, IDK what I was thinking asking you to add them)(I thought that was a weird request but what do I know...lol)
trying now
So what do you mean by "making it local"?
in Laravel you have storage "disks". They can be local or external (S3, FTP, DropBox, etc)
and Livewire uses that disk to store a temp file to show you the preview
anyway, trying the headers thing
BOOM
Yay!
this has honestly been one of the best support sessions ever. You're amazing
Sorry it took me a few minutes to wake up but the issue was purely CORS related, nothing to do with presigned URLs
Sure! Happy to help!
no worries, is it late where you are?
(I'm in Vancouver Canada, 3:45pm Sunday)
I'm in Berlin, so not exactly late but I did start to shut by brain down haha
wow, go to bed!
but thanks so so much for your help
ha, going to follow on Mastodon!
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
hey all, i'm having the same problem, not sure what's the solution here
ok nevermind, got it
thanks!