Cloudflare R2 CORS Ayarları Nasıl Yapılır?

Görsel tarayıcıda açıldığı halde JavaScript fetch veya canvas işlemi CORS hatası veriyorsa bucket'ın izin verilen origin/method politikası eksik olabilir. CORS, kimlik doğrulama sistemi değildir.

1. Gerçek origin'i bulun

Tarayıcı Network panelinde başarısız isteğin Origin başlığını okuyun. https://example.com ile https://www.example.com farklı origin'lerdir; path yazılmaz. Request method ve özel header'ları kaydedin.

2. Dar okuma politikası ekleyin

R2 bucket → Settings → CORS Policy alanında, yalnız herkese açık okuma örneği:

[
  {
    "AllowedOrigins": ["https://example.com"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["Range"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

Domain'i değiştirin. PUT/upload gerekiyorsa yöntem ve gereken header'ları ayrıca tasarlayın; S3 API yetkisini bu politika sağlamaz. Kimlik bilgili isteklerde * yaklaşımına güvenmeyin.

3. Preflight ve gerçek cevabı sınayın

curl -i -X OPTIONS 'https://media.example.com/ornek.webp' -H 'Origin: https://example.com' -H 'Access-Control-Request-Method: GET'
curl -I 'https://media.example.com/ornek.webp' -H 'Origin: https://example.com'

Allow-Origin değeri istemci origin'iyle uyumlu olmalı. R2 custom domain cache'i eski CORS başlıklarını saklıyorsa ilgili hostname/URL cache'ini yenileyin. Tarayıcı preflight cache'i nedeniyle temiz oturumda da test edin.

4. Güvenlik ve sonuç

İzinli origin'den fetch başarılı, izin verilmeyen origin'den tarayıcı okuması engelli olmalı. Public nesne yine curl ile indirilebilir; CORS erişim yetkisi yerine geçmez. Gizli belge için public bucket değil, yetkilendirilmiş indirme tasarımı kullanın.

Tarayıcıdan gerçek okuma testi

İzin verdiğiniz sitenin sayfasında DevTools Console üzerinden, gerçek public dosya URL'siyle:

fetch('https://media.example.com/ornek.webp')
  .then(response => {
    if (!response.ok) throw new Error('HTTP ' + response.status);
    return response.blob();
  })
  .then(blob => console.log(blob.type, blob.size))
  .catch(error => console.error(error.message));

Başarıda dosya türü ve byte boyutu görünür. Curl'ün dosyayı indirmesi tarayıcının CORS kontrolünü geçtiği anlamına gelmez. İzinli olmayan ayrı origin'de aynı denemeyi yapın; CORS engeli bekleyin, fakat public nesnenin gizli hale gelmediğini unutmayın.