Cloudflare DevelopersCD
Cloudflare Developers•3y ago
brunub

r2 CORS problem

Hello guys, I've been trying to PUT a data to my r2 bucket from the application's front end using a presigned URL but it have been blocked by CORS
Error: Access to fetch at 'https://video.xxxxxxxxxx.r2.cloudflarestorage.com/xxxxxxx from origin 'http://localhost:3000' 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.

In the bucket's CORS config é have the method PUT and the URL http://localhost:3000 set
My request is simple as
    await fetch(signedURL, {
      method: 'PUT',
      body: data,
    })

the signed URl is generated like this

    const signedUrl = await getSignedUrl(
      r2,
      new PutObjectCommand({
        Bucket: process.env.CLOUDFLARE_BUCKET_NAME,
        Key: 'key',

      }),
      { expiresIn: 60 },
    )


the s3 instance is pretty simple as well:
export const r2 = new S3Client({
  region,
  endpoint,
  credentials: {
    accessKeyId,
    secretAccessKey,
  },
})


Any adea how to get over the CORS problem in this context?
Was this page helpful?