R2 CORS issue

❓Other (read rules)

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"
    ]
  }
]

[
  {
    "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.

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,
      });

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,
                });

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

Cloudflare Developers•2mo ago

shaq

R2 CORS issue

❓Other (read rules)

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

[
  {
    "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.

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,
      });

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,
                });

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

R2 CORS issue

R2 CORS issue

Similar Threads

Similar Threads

Similar Threads