TAMAMLANDI 18 Aralık 2025

HLS Streaming CORS Fix

Nginx ayarı değişikliği gerekmeden Laravel API üzerinden çözüm

Basit Anlatım (Herkes İçin)

Problem: Müzik dosyaları (HLS formatında) tarayıcıda çalmıyordu. "keyLoadError" hatası alıyordu.

Neden: Tarayıcılar güvenlik nedeniyle farklı kaynaklardan gelen dosyaları engelliyor. Nginx sunucusu dosyaları verirken "bu dosyaya güvenebilirsin" demiyor.

Çözüm: Dosyaları Nginx yerine Laravel üzerinden verdik. Laravel her dosyaya "bu güvenli" etiketini ekliyor.

Nginx ayarı DEĞİŞMEDİ!

Tüm çözüm kod tarafında yapıldı. Sunucu ayarlarına dokunulmadı.

Teknik Detaylar (Geliştiriciler İçin)

Problem Analizi

Browser (HLS.js) → /storage/.../segment.ts → Nginx → No CORS ❌
Browser (HLS.js) → /api/.../key → Laravel → CORS ✅

Nginx static dosyaları doğrudan sunuyor, Laravel middleware'i çalışmıyor.

Çözüm Mimarisi

Browser (HLS.js) → /api/muzibu/songs/{id}/hls/playlist.m3u8 → Laravel → CORS ✅
Browser (HLS.js) → /api/muzibu/songs/{id}/hls/segment-XXX.ts → Laravel → CORS ✅
Browser (HLS.js) → /api/muzibu/songs/{id}/key → Laravel → CORS ✅

Tüm HLS dosyaları artık Laravel API üzerinden sunuluyor.

Değişen Dosyalar

Modules/Muzibu/routes/api.php

Yeni route: /{id}/hls/{filename}

Modules/Muzibu/app/Http/Controllers/Api/SongStreamController.php

Yeni method: serveHls() - CORS headers ile dosya sunumu

app/Services/SignedUrlService.php

HLS URL: /storage/.../api/...

CORS Headers

Access-Control-Allow-Origin: https://muzibu.com

Access-Control-Allow-Methods: GET, OPTIONS

Access-Control-Allow-Headers: Content-Type, Range

Access-Control-Allow-Credentials: true

Nginx Ayarları

Değişiklik Yok

Nginx konfigürasyonunda hiçbir değişiklik yapılmadı.

Neden Nginx'e dokunulmadı?

  • Nginx ayarları tenant-aware değil (hardcode domain gerekir)
  • Plesk yönetimli sunucu (custom config riski)
  • Laravel CORS middleware zaten mevcut ve çalışıyor
  • Kod tabanlı çözüm daha sürdürülebilir

Başka Sunucuya Taşırken

1. Kod Taşıma

Aşağıdaki dosyalar güncel olmalı:

  • • Modules/Muzibu/routes/api.php
  • • Modules/Muzibu/app/Http/Controllers/Api/SongStreamController.php
  • • app/Services/SignedUrlService.php

2. Cache Temizleme

php artisan route:clear
php artisan cache:clear
php artisan config:clear

3. Nginx Ayarı

Gerekli değil!

HLS dosyaları Laravel API üzerinden sunuluyor, Nginx sadece PHP-FPM'e proxy yapıyor.

4. Test

curl -I "https://domain.com/api/muzibu/songs/320/hls/playlist.m3u8"
# HTTP 200 + Access-Control-Allow-Origin header olmalı

Test Sonuçları

Playlist endpoint: 200 OK + CORS
Segment endpoint: 200 OK + CORS
Key endpoint: 200 OK + CORS
OPTIONS preflight: 204 OK