R2 Cors
I'm having a "cors" problem on my R2.
I'm using SignedUrl to upload to r2, my backend generates a signedUrl and the front end uses this URL to upload it.
My backend function that generates signedUrl
export async function getSignedUrlImage(fileName: string) {
const signedUrl = await getSignedUrl(
r2, new PutObjectCommand({
Bucket: 'bucket_eldr',
Key: fileName,
ContentType: 'video/mp4'
}),
{
expiresIn: 600
}
)
return signedUrl;
}
I'm getting a "cors" error trying to upload to the frontend
My "cors" policy in cloudflare r2
[
{
"AllowedOrigins": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD",
"PUT",
"POST",
"DELETE"
],
"AllowedHeaders": [
"range"
],
"ExposeHeaders": [
"Content-Type",
"Access-Control-Allow-Origin",
"ETag"
],
"MaxAgeSeconds": 3600
}
]
Create: 1 Visit to pick up at 'https://bucket_eldr.5e7805092f723a16f21d38090e0542f4.r2.cloudflarestoroge.com - Credential=4b19139ac4e40d7568bac85dcbbd2df2%2F20240809%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240809T145732Z&X-Amz-Expires=600&X-Amz-Signature=00d0b7979acf 8c4bead6cf40bcace59d5dcf4f6544596545bda2cad38b8c1c52&X-Amz-SignedHeaders=host&x-id=PutObject' from source 'http://localhost: 5173 ' 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.
Does anyone know what it could be?
Basically I'm on localhost, :3000 is backend, :5173 is my front.
I'm using SignedUrl to upload to r2, my backend generates a signedUrl and the front end uses this URL to upload it.
My backend function that generates signedUrl
export async function getSignedUrlImage(fileName: string) {
const signedUrl = await getSignedUrl(
r2, new PutObjectCommand({
Bucket: 'bucket_eldr',
Key: fileName,
ContentType: 'video/mp4'
}),
{
expiresIn: 600
}
)
return signedUrl;
}
I'm getting a "cors" error trying to upload to the frontend
My "cors" policy in cloudflare r2
[
{
"AllowedOrigins": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD",
"PUT",
"POST",
"DELETE"
],
"AllowedHeaders": [
"range"
],
"ExposeHeaders": [
"Content-Type",
"Access-Control-Allow-Origin",
"ETag"
],
"MaxAgeSeconds": 3600
}
]
Create: 1 Visit to pick up at 'https://bucket_eldr.5e7805092f723a16f21d38090e0542f4.r2.cloudflarestoroge.com - Credential=4b19139ac4e40d7568bac85dcbbd2df2%2F20240809%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240809T145732Z&X-Amz-Expires=600&X-Amz-Signature=00d0b7979acf 8c4bead6cf40bcace59d5dcf4f6544596545bda2cad38b8c1c52&X-Amz-SignedHeaders=host&x-id=PutObject' from source 'http://localhost: 5173 ' 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.
Does anyone know what it could be?
Basically I'm on localhost, :3000 is backend, :5173 is my front.
Welcome to the official Cloudflare Developers server. Here you can ask for help and stay updated with the latest news
85,042Members
Resources
Was this page helpful?
