​

Cloudflare R2 CORS Configuration

​

Problem

Access to fetch at 'https://assets.hyperscape.club/models/tree.glb' from origin 'https://hyperscape.gg' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

​

Solution

​

Automatic Configuration (CI/CD)

- name: Configure R2 CORS
  run: bash scripts/configure-r2-cors.sh
  env:
    CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    R2_BUCKET_NAME: hyperscape-assets

​

Manual Configuration

​

Using Wrangler CLI

# Set CORS configuration
bunx wrangler r2 bucket cors set hyperscape-assets \
  --config scripts/r2-cors-config.json

​

CORS Configuration File

{
  "allowed": {
    "origins": ["*"],
    "methods": ["GET", "HEAD"],
    "headers": ["*"]
  },
  "exposed": ["ETag", "Content-Length", "Content-Type"],
  "maxAge": 3600
}

​

Using Cloudflare Dashboard

1. Log in to Cloudflare Dashboard
2. Navigate to R2 → hyperscape-assets bucket
3. Go to Settings → CORS Policy
4. Add CORS rule:
   • Allowed Origins: *
   • Allowed Methods: GET, HEAD
   • Allowed Headers: *
   • Exposed Headers: ETag, Content-Length, Content-Type
   • Max Age: 3600
5. Click Save

​

Verification

# Test from command line
curl -I -H "Origin: https://hyperscape.gg" \
  https://assets.hyperscape.club/models/test.glb

# Should include headers:
# Access-Control-Allow-Origin: *
# Access-Control-Expose-Headers: ETag, Content-Length, Content-Type

fetch('https://assets.hyperscape.club/models/test.glb', {
  method: 'HEAD',
  headers: { 'Origin': 'https://hyperscape.gg' }
})
.then(r => console.log('CORS OK:', r.headers.get('access-control-allow-origin')))
.catch(e => console.error('CORS Error:', e));

​

Allowed Domains

• hyperscape.gg (production frontend)
• *.hyperscape.gg (subdomains)
• hyperbet.win (betting frontend)
• *.hyperbet.win (subdomains)
• hyperscape.bet (alternative domain)
• *.hyperscape.bet (subdomains)
• localhost:* (local development)
• Any other origin (wildcard *)

​

Security Considerations

​

Why Wildcard Origin?

1. No authentication required - Assets are publicly accessible
2. Read-only access - Only GET/HEAD methods allowed (no PUT/POST/DELETE)
3. No sensitive data - Assets are game content, not user data

​

Alternative: Restricted Origins

{
  "allowed": {
    "origins": [
      "https://hyperscape.gg",
      "https://hyperbet.win",
      "https://hyperscape.bet",
      "http://localhost:3333"
    ],
    "methods": ["GET", "HEAD"],
    "headers": ["*"]
  },
  "exposed": ["ETag", "Content-Length", "Content-Type"],
  "maxAge": 3600
}

• ✅ More restrictive (only listed domains can load assets)
• ❌ Requires updating config when adding new domains
• ❌ Breaks local development on non-standard ports

​

Troubleshooting

​

CORS Errors Persist After Configuration

​

Wrangler CORS Command Fails

1. Invalid JSON format:
   # Verify JSON is valid
   cat scripts/r2-cors-config.json | jq .
   
2. Missing authentication:
   # Set Cloudflare credentials
   export CLOUDFLARE_ACCOUNT_ID=your-account-id
   export CLOUDFLARE_API_TOKEN=your-api-token
   
3. Bucket doesn’t exist:
   # List buckets
   bunx wrangler r2 bucket list
   
   # Create bucket if needed
   bunx wrangler r2 bucket create hyperscape-assets
   

​

Assets Still Not Loading

1. Verify CORS is configured:
   bunx wrangler r2 bucket cors get hyperscape-assets
   
2. Check asset exists in R2:
   bunx wrangler r2 object get hyperscape-assets/models/test.glb
   
3. Verify CDN URL is correct:
   • Client .env: PUBLIC_CDN_URL=https://assets.hyperscape.club
   • Server .env: PUBLIC_CDN_URL=https://assets.hyperscape.club
4. Check R2 custom domain:
   • R2 bucket → Settings → Custom Domains
   • Verify assets.hyperscape.club is connected

​

Related Documentation

• Cloudflare Deployment - Full Cloudflare Pages deployment guide
• Vast.ai Deployment - GPU streaming deployment
• README.md - Quick start guide

​

Implementation Details

​

CORS Configuration Script

1. Reads CORS config from scripts/r2-cors-config.json
2. Uses Wrangler CLI to apply configuration
3. Verifies configuration was applied successfully

​

Wrangler API Format

{
  "allowed": {
    "origins": ["*"],
    "methods": ["GET", "HEAD"],
    "headers": ["*"]
  },
  "exposed": ["ETag", "Content-Length", "Content-Type"],
  "maxAge": 3600
}

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

• Nested allowed.origins/methods/headers structure
• exposed array (not ExposeHeaders)
• maxAge integer (not MaxAgeSeconds)