CORS
Have been getting 403 [Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. Status code: 403
when trying to PUT to a signedUrl generated from the S3 api
I'm building it this way:
const S3 = new S3Client({
region: 'auto',
endpoint:
https://${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com,
credentials: {
accessKeyId: process.env.CLOUDFLARE_ACCESS_KEY_ID!,
secretAccessKey: process.env.CLOUDFLARE_SECRET_ACCESS_KEY!,
},
});
const response = await getSignedUrl(
S3, new PutObjectCommand(
{
Bucket: process.env.CLOUDFLARE_BUCKET,
Key: fileName,
Metadata: {
"x-amz-meta-origin": "http://localhost:3000"
}
}
),
{ expiresIn: 3600 }
)
And this is CORS policy in R2:
[
{
"AllowedOrigins": [
"http://localhost:3000"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"HEAD"
],
"AllowedHeaders": [
"*"
]
}
]6 Replies
Does your presigned URL work outside the browser?
Also I’m not near my computer right now so can’t confirm if we deal with the trailing / in the AllowedOrigins, but have you tried removing it to see if that helps?
I've tried to remove it, I'm pretty much allowing everything in my CORS, so any origin, any headers, any method should work
Okay, started to allow every header, and now it's working, but I'm not sure this is the reason, will continue debugging and playing with the config to see what makes it fail
Generally I’ve seen the issue being headers. Try looking at the outgoing request from your browser and allow all headers that you’re sending!
okay so, it was working, didn't make any changes for a few hours, I come back to test again with the same logic that was working before and now it isn't, this is so strange, signed urls are not suitable for prod environments as I can see
Did your presigned URL expire?
Yes, but I'm generating a new one for every put request, for added security, expire time is 60 seconds