When I use this CURL command:

curl -I 'https://example-cdn.r2.dev/path/to/image.png' 
  -H 'Origin: https://localhost:3000'

I get back the proper CORs headers:

HTTP/1.1 200 OK
Date: Sat, 07 Dec 2024 10:25:07 GMT
Content-Type: image/png
Content-Length: 2801128
Connection: keep-alive
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
ETag: "95547db32c69859cc3d7f80e0a8291fa"
Last-Modified: Sat, 07 Dec 2024 05:46:48 GMT
Vary: Origin
Access-Control-Expose-Headers: *
Server: cloudflare
CF-RAY: 8ee3cf56dd5056b9-OSL

However, in the browser, I’m getting a CORs error when making this same request using plain fetch, like this:

            const response = await fetch(url);

My R2 bucket is configured to accept all cross-origin requests:

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT",
      "DELETE"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3600
  }
]

My guess is that the browser is not setting the Origin because Cloudflare docs state that:

A cross-origin request is identified by the presence of an Origin HTTP request header, with the value of the Origin representing a valid, allowed origin as defined by the AllowedOrigins field of your CORS policy.

Note that there is no issue when using an img tag, etc. I’m at a loss, I feel like everything is setup correctly, and I’m not sure how to debug as devtools doesn’t show me the full headers — only the provisional ones.