Cloudflare Developers•2mo ago

CORS issues when downloading files from R2

I've configured my files from R2 to be served from: assets.mydomain.com So, fetching and displaying images on my site works as expected, for example, assets.mydomain.com/some-random-id.png I've added a download button on each image, but I can't get past the CORS errors. I've followed almost every solution I found on the internet, including adding transform headers rules, but still no luck. I've set up CORS rules on the bucket, but nothing! Does anyone here have experience with this? Help would be appreciated!

2 Replies

SirTheo•2mo ago

can you send a snipped copy of your cors?

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "HEAD", "PUT", "POST"],
    "AllowedOrigins": ["https://assets.mydomain.com"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "HEAD", "PUT", "POST"],
    "AllowedOrigins": ["https://assets.mydomain.com"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

so: 1. Go to Rules → Transform Rules in the Cloudflare panel. 2. Add a new transform rule with these conditions: - When incoming requests match: Specify your domain (e.g. assets.mydomain.com) and path (e.g. *.png). 3. Action: Modify Response Header: - Set Header: - Access-Control-Allow-Origin: * or https://assets.mydomain.com - Access-Control-Allow-Methods: GET, HEAD - Access-Control-Allow-Headers: *

teenaOP•2mo ago

This is what I currently have:

[
  {
    "AllowedOrigins": [
      "https://assets.mydomain.com",
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET", "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
"ExposeHeaders": ["Etag"]
    "MaxAgeSeconds": 3600
  }
]

[
  {
    "AllowedOrigins": [
      "https://assets.mydomain.com",
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET", "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
"ExposeHeaders": ["Etag"]
    "MaxAgeSeconds": 3600
  }
]

Let me update the transform rules to your suggestions and report back Making your suggestions, plus clearing my browser's cache etc made it work. Thanks a lot Cc @SirTheo 💚

Gaming

Programming

CORS issues when downloading files from R2