Need help with R2 CORS, Please help!

A

aleksa•5/27/25, 5:53 PM

Hello, if someone could please help me get R2 CORS set up properly and working from localhost:3000, this is the second time I am facing this issue. I have a client side page that loads all the images via API/server and it works great, but if I try to open that image via a modal/dialog or download it I get

No 'Access-Control-Allow-Origin' header is present

No 'Access-Control-Allow-Origin' header is present

No 'Access-Control-Allow-Origin' header is present

No 'Access-Control-Allow-Origin' header is present CORS error:

Access to image at 'https://r2.example.com/users/Ihz31x61QS4lfcNkMyBffCOZQQ3xAdsN/processed/cbb171d1-ff50-450a-95e5-e2202e0840e3-assets_task_01jtj5sstsesrs1sj86mwx720v_1746514362_img_3.webp' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to image at 'https://r2.example.com/users/Ihz31x61QS4lfcNkMyBffCOZQQ3xAdsN/processed/cbb171d1-ff50-450a-95e5-e2202e0840e3-assets_task_01jtj5sstsesrs1sj86mwx720v_1746514362_img_3.webp' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to image at 'https://r2.example.com/users/Ihz31x61QS4lfcNkMyBffCOZQQ3xAdsN/processed/cbb171d1-ff50-450a-95e5-e2202e0840e3-assets_task_01jtj5sstsesrs1sj86mwx720v_1746514362_img_3.webp' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to image at 'https://r2.example.com/users/Ihz31x61QS4lfcNkMyBffCOZQQ3xAdsN/processed/cbb171d1-ff50-450a-95e5-e2202e0840e3-assets_task_01jtj5sstsesrs1sj86mwx720v_1746514362_img_3.webp' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

this is my CORS policy:

[
  {
    "AllowedOrigins": [
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3000
  }
]

A

aleksa•5/27/25, 6:00 PM

I already looked up bunch of information on forum and previous discussions here, and still can't figure it out, so decided to ask for a help.

A

aleksa•5/29/25, 7:09 PM

A

aleksa•6/9/25, 12:18 PM

so I managed to get it working, so I will leave it here as it might be useful for someone else. The CORS policy ended up looking like this, for production you have to add also prod URL in

AllowedOrigins

AllowedOrigins

AllowedOrigins

AllowedOrigins:

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://example.com"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD",
      "DELETE"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Cache-Control",
      "Content-Disposition",
      "Content-Encoding",
      "Expires"
    ],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://example.com"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD",
      "DELETE"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Cache-Control",
      "Content-Disposition",
      "Content-Encoding",
      "Expires"
    ],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://example.com"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD",
      "DELETE"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Cache-Control",
      "Content-Disposition",
      "Content-Encoding",
      "Expires"
    ],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://example.com"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "HEAD",
      "DELETE"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Type",
      "Access-Control-Allow-Origin",
      "ETag",
      "Cache-Control",
      "Content-Disposition",
      "Content-Encoding",
      "Expires"
    ],
    "MaxAgeSeconds": 3000
  }
]

The biggest thing was testing it with

curl

curl

curl

curl to see if the policies are in place, you can ask ChatGPT or other AI to help you with that, and also the most important thing was ticking

Disable Cache

Disable Cache

Disable Cache

Disable Cache in Network Tab in the Chrome Dev Tools when testing the local app.

Need help with R2 CORS, Please help!

Similar Threads

Similar Threads

Similar Threads