Cloudflare DevelopersCD
Cloudflare Developers•9h ago
shaq

R2 CORS issue

I get a CORS issue when making requests from my browser to my cloudflare R2 bucket, the browser accesses the bucket with a presigned url, i followed the documentation about the CORS but still facing issues

this is the current policy 

[
  {
    "AllowedOrigins": [
      "http://localhost:3001"
    ],
    "AllowedMethods": [
      "PUT",
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Content-Type"
    ]
  }
]


but i have tried setting origins and headers to * and it still gives me the same issue


Access to fetch at 'https://321321421412412412412.r2.cloudflarestorage.com/channels/8808/images/f7906cd3-a6f5-48e0-bccf-3636e16f08e7.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=6092a9f7e4678c17a52de31816e1c0b4%2F20251219%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20251219T102128Z&X-Amz-Expires=60&X-Amz-Signature=93dd3a882a7f38661cd3d59a305bcb9b2ec7c8d0ee18054862e240b211ed993f&X-Amz-SignedHeaders=host&x-id=PutObject' from origin 'http://localhost:3001' 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.


this is my server side i give the client a url

const command = new PutObjectCommand({
        Bucket: bucket,
        Key: key,
        ContentType: img.contentType || "application/octet-stream",
      });

      const uploadUrl = await getSignedUrl(s3Client, command, {
        expiresIn: 60,
      });


and my client side does this following with uploadURL

const putRes = await fetch(u.uploadUrl, {
                    method: "PUT",
                    headers: { "Content-Type": file.type || "application/octet-stream" },
                    body: file,
                });
Was this page helpful?