🔑

HLS keyLoadError CORS Fix

Muzibu Anasayfa Console Hatası Çözümü

✅ Çözüldü HLS.js CORS AES-128 Encryption
📅 18 Aralık 2025 | 🎯 Tenant: muzibu.com (ID: 1001)

📝 Basit Anlatım (Herkes İçin)

🎯 Ne Oluyordu?

Muzibu anasayfası açıldığında tarayıcı konsolunda kırmızı bir hata mesajı görünüyordu: HLS FATAL ERROR: keyLoadError

Bu hata, müzik çalarken kullanılan şifreleme anahtarının yüklenemediğini gösteriyordu.

🔍 Neden Oluyordu?

Tarayıcılar güvenlik nedeniyle farklı kaynaklardan gelen istekleri kontrol eder (CORS politikası). Sistemimizde iki güvenlik ayarı birbiriyle çakışıyordu:

  • "Herkese açık" ayarı (*)
  • "Kimlik doğrulama gerekli" ayarı

Bu ikisi aynı anda kullanılamaz - tarayıcı bunu reddeder!

✅ Nasıl Çözüldü?

Şifreleme anahtarı için ayrı bir yol (URL) oluşturduk. Bu yeni yol, sorunlu güvenlik ayarlarından etkilenmiyor.

/api/muzibu/songs/.../key → /hls-key/muzibu/songs/...

🎵 Kullanıcı Deneyimi

Artık anasayfa açıldığında:

  • Console'da hata mesajı görünmüyor
  • Şarkılar sorunsuz yükleniyor
  • HLS streaming düzgün çalışıyor

🔧 Teknik Detaylar (Geliştiriciler İçin)

1 Problem Analizi

// Console Error:
HLS FATAL ERROR: {
song_id: 350,
errorType: "networkError",
errorDetails: "keyLoadError",
url: undefined
}

2 Root Cause: CORS Conflict

// config/cors.php
'paths' => ['api/*'], // Key endpoint buraya dahil
'allowed_origins' => ['*'],
'supports_credentials' => true, // ❌ CONFLICT!
Browser Rejection:

Access-Control-Allow-Origin: * ile Access-Control-Allow-Credentials: true birlikte kullanılamaz. Browser bu kombinasyonu reddeder.

3 Çözüm: Route Path Değişikliği

Önceki Sonraki
/api/muzibu/songs/{id}/key /hls-key/muzibu/songs/{id}

/hls-key/ path'i api/* pattern'ine dahil olmadığı için Laravel CORS middleware bypass ediliyor. Controller kendi CORS header'larını handle ediyor.

4 Değiştirilen Dosyalar

Modules/Muzibu/Providers/MuzibuServiceProvider.php Route tanımı
Modules/Muzibu/app/Jobs/ConvertToHLSJob.php Key URL format
app/Http/Middleware/NoSessionForHlsKey.php Path pattern
app/Http/Middleware/FixResponseCacheHeaders.php Path pattern
storage/tenant1001/.../hls/*/playlist.m3u8 154 dosya güncellendi

5 Test Sonuçları

# CORS Preflight Test
curl -X OPTIONS https://muzibu.com/hls-key/muzibu/songs/350
✅ Access-Control-Allow-Origin: *
✅ Access-Control-Allow-Methods: GET, OPTIONS
✅ Access-Control-Allow-Headers: Content-Type, Range, X-Requested-With
✅ HTTP Status: 204 No Content
# Key Endpoint Test
curl https://muzibu.com/hls-key/muzibu/songs/350
✅ HTTP Status: 200 OK
✅ Content-Type: application/octet-stream
✅ Content-Length: 16 bytes (AES-128 key)

📊 Özet

🔴
Önceki Durum
keyLoadError hatası
⚙️
Yapılan İşlem
Route path değişikliği
🟢
Şimdiki Durum
HLS sorunsuz çalışıyor