Cloudflare R2 CORS Generator: Create Bucket CORS JSON for Browser Apps

What is a Cloudflare R2 CORS generator?

A Cloudflare R2 CORS generator helps you create the bucket policy that tells browsers which frontend origins can read or upload objects from R2. CORS is only enforced by the browser. Your presigned URL or public object may work in curl, but the same request can fail in a web app if R2 does not return the right Access-Control-* headers.

R2 CORS fields explained

Dashboard JSON vs Wrangler JSON

R2 developers often run into a small mismatch: the dashboard-style rule list and the Wrangler file shape are not always pasted in the same wrapper. The Spoold tool shows both forms. Use the editable CORS JSON for dashboard-style policy review, and use the generated Wrangler file when running wrangler r2 bucket cors set.

[
  {
    "AllowedOrigins": ["https://app.example.com"],
    "AllowedMethods": ["GET", "PUT", "HEAD"],
    "AllowedHeaders": ["Content-Type"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

{
  "rules": [
    {
      "allowed": {
        "origins": ["https://app.example.com"],
        "methods": ["GET", "PUT", "HEAD"],
        "headers": ["Content-Type"]
      },
      "exposeHeaders": ["ETag"],
      "maxAgeSeconds": 3600
    }
  ]
}

Best presets for common R2 use cases

• Public assets: use GET and HEAD. Add Content-Length to exposed headers if the frontend reads file size.
• Presigned upload: use PUT, POST, and HEAD. Include Content-Type and any x-amz-* headers your upload sends.
• Signed download: use GET and HEAD. Expose ETag only if the frontend reads it.

How to generate R2 CORS config

1. Open the S3/R2 CORS tool and choose Cloudflare R2.
2. Pick a preset: public read, presigned upload, signed download, or fonts/assets.
3. Enter your production origin and any localhost origin used in development.
4. Add request headers from your frontend upload code.
5. Copy the editable JSON or download the Wrangler file.
6. Use the Debug tab if the browser still reports a preflight or missing-origin error.

Why use the debugger after generating config?

The generator gives you a good starting policy. The debugger checks the exact failing request. Paste your current R2 CORS JSON, the request origin, method, request headers, and browser console error. It will tell you whether the origin, method, headers, or exposed response headers are missing.