Verwenden Sie einen Online-M3U8-Player und haben dabei schon einmal eines der folgenden Probleme festgestellt?

• Auf der Seite erscheint CORS Error
• Das Video lädt endlos, startet aber nicht
• Die .m3u8-Datei lässt sich öffnen, die .ts-Dateien können jedoch nicht geladen werden
• In der Browser-Konsole erscheint Access-Control-Allow-Origin
• Das Problem tritt sowohl in Chrome und Edge als auch auf mobilen Browsern auf

Wenn ja, liegt das Problem höchstwahrscheinlich nicht am Player, sondern an den CORS-Richtlinien (Cross-Origin Resource Sharing) des Browsers.

In diesem Artikel erklären wir einfach und verständlich, was CORS ist und wie Sie Cross-Origin-Probleme bei der M3U8- bzw. HLS-Wiedergabe beheben können.

Was ist CORS?

CORS steht für Cross-Origin Resource Sharing.

Dabei handelt es sich um einen Sicherheitsmechanismus moderner Browser, der verhindert, dass Webseiten ohne ausdrückliche Erlaubnis auf Ressourcen anderer Domains zugreifen.

Beispielsweise läuft Ihr Player unter:

https://m3u8.wusuper.com

Die Videodatei befindet sich jedoch unter:

https://video.example.com/movie/index.m3u8

Da sich Domain, Protokoll oder Port unterscheiden, betrachtet der Browser dies als Cross-Origin-Anfrage.

Erlaubt der Video-Server keinen solchen Zugriff, blockiert der Browser die Anfrage automatisch.

Das bezeichnet man als CORS-Beschränkung.

Warum treten CORS-Probleme besonders häufig bei M3U8 auf?

Eine normale MP4-Datei besteht meist nur aus einer einzelnen Anfrage.

Bei M3U8 (HLS) ist das anders.

Während der Wiedergabe fordert der Player fortlaufend mehrere Dateien an:

index.m3u8

↓

playlist.m3u8

↓

0001.ts
0002.ts
0003.ts
...

Zusätzlich können verschlüsselte Streams noch Folgendes anfordern:

key.key

Ist auch nur eine dieser Dateien nicht für Cross-Origin-Zugriffe freigegeben, schlägt die gesamte Wiedergabe fehl.

Deshalb gilt:

Nur weil sich eine M3U8-Datei öffnen lässt, bedeutet das nicht, dass das Video abgespielt werden kann.

Alle benötigten Ressourcen müssen CORS unterstützen:

• M3U8-Dateien
• TS-Segmente
• Verschlüsselungsschlüssel (KEY)
• Untertitel (VTT)
• Bilder

Woran erkennt man, dass CORS die Ursache ist?

Öffnen Sie die Entwicklertools Ihres Browsers:

F12

Anschließend wechseln Sie zu:

Network

oder

Console

Wenn dort Meldungen wie

Access to fetch has been blocked by CORS policy

oder

No 'Access-Control-Allow-Origin'

erscheinen, liegt das Problem eindeutig an CORS.

Auch folgende Fehlermeldungen deuten häufig darauf hin:

Failed to fetch

Network Error

CORS Error

Warum schränken Browser Cross-Origin-Anfragen ein?

Viele Anfänger fragen:

Warum machen Browser das so kompliziert?

Der Grund ist die Sicherheit.

Ohne diese Einschränkung könnten bösartige Webseiten unbemerkt Daten von anderen Webseiten auslesen, beispielsweise:

• Online-Banking
• E-Mail-Konten
• Unternehmensportale
• Benutzeranmeldungen

Deshalb erlaubt der Browser Cross-Origin-Zugriffe nur dann, wenn der Server ausdrücklich erklärt:

Andere Websites dürfen auf meine Ressourcen zugreifen.

Erst dann wird die Anfrage zugelassen.

Wie sehen korrekte CORS-Header aus?

Der Server sollte mindestens folgenden Header zurückgeben:

Access-Control-Allow-Origin: *

oder eine bestimmte Domain erlauben:

Access-Control-Allow-Origin: https://m3u8.wusuper.com

Werden zusätzlich OPTIONS-Preflight-Anfragen verwendet, sollten außerdem folgende Header gesetzt werden:

Access-Control-Allow-Methods: GET,POST,OPTIONS

und

Access-Control-Allow-Headers: *

Nur dann können Browser Videodateien problemlos laden.

CORS in Nginx aktivieren

Wenn Sie Ihren eigenen Server verwalten, können Sie Folgendes hinzufügen:

location / {

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers *;

}

Für HLS-Streams empfiehlt sich zusätzlich:

location ~* \.(m3u8|ts)$ {

    add_header Access-Control-Allow-Origin *;

}

Anschließend laden Sie Nginx neu:

nginx -s reload

Die Änderung wird sofort wirksam.

CORS unter Apache aktivieren

Bei Apache genügt in vielen Fällen:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

CORS in Node.js (Express) aktivieren

Mit Express lässt sich CORS sehr einfach aktivieren:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');

  next();
});

Warum funktioniert ein anderer Player, meiner aber nicht?

Das sorgt häufig für Verwirrung.

Andere Player verwenden möglicherweise:

• Einen Server-Proxy
• Einen eigenen M3U8-Parser
• Ein CDN mit aktivierter CORS-Unterstützung
• Eine Same-Origin-Bereitstellung
• Eine Videoquelle, die CORS bereits unterstützt

Ein typischer Online-Player arbeitet dagegen so:

Browser
↓
Direkte Anfrage an den Video-Server

Da der Browser direkt mit dem Video-Server kommuniziert, muss er die CORS-Richtlinien einhalten.

Ein Umgehen dieser Einschränkung ist daher nicht möglich.

Kann das Frontend CORS umgehen?

Viele Entwickler fragen:

Kann JavaScript CORS deaktivieren?

Die Antwort lautet:

Nein.

CORS ist ein Sicherheitsmechanismus des Browsers.

Ganz gleich, ob Sie

• Vue
• React
• Astro
• Next.js

verwenden – keine Frontend-Technologie kann diese Einschränkung umgehen.

Es gibt nur zwei sinnvolle Lösungen:

✅ CORS auf dem Video-Server aktivieren

oder

✅ Einen eigenen Reverse Proxy verwenden.

Häufige Lösungen

Was tun, wenn Sie den Video-Server nicht ändern können?

Viele öffentliche M3U8-Links sehen beispielsweise so aus:

https://example.com/video/index.m3u8

Da Sie keinen Zugriff auf den Server haben, können Sie dessen Einstellungen nicht ändern.

Es gibt in diesem Fall zwei Möglichkeiten.

Lösung 1: Eigenen Proxy verwenden

Browser
↓
Ihr Server
↓
Video-Server

Da der Browser nur mit Ihrem Server kommuniziert, treten keine Cross-Origin-Probleme mehr auf.

Lösung 2: Den Videoanbieter kontaktieren

Bitten Sie den Anbieter, folgenden Header hinzuzufügen:

Access-Control-Allow-Origin

Dies ist die sauberste und empfohlene Lösung.

Warum zeigt der Online-M3U8-Player einen CORS-Fehler an?

Wenn Sie unseren Online-M3U8-Player verwenden, können folgende Probleme auftreten:

• Die Playlist kann nicht analysiert werden
• TS-Dateien lassen sich nicht laden
• Schwarzer Bildschirm
• Endloses Puffern
• CORS-Fehler in der Browser-Konsole

In den meisten Fällen liegt die Ursache nicht am Player, sondern daran, dass der Video-Server keine korrekten CORS-Header sendet.

Wenn Sie den Server verwalten, sollten Sie zuerst CORS aktivieren.

Bei Videoquellen von Drittanbietern sollten Sie prüfen, ob Cross-Origin-Zugriffe unterstützt werden.

Fazit

Wenn die Wiedergabe einer M3U8-Datei fehlschlägt, vermuten viele Nutzer zunächst einen Fehler im Player.

Tatsächlich gehört CORS jedoch zu den häufigsten Ursachen für HLS-Wiedergabefehler.

Merken Sie sich folgende Punkte:

• Browser blockieren Cross-Origin-Anfragen standardmäßig.
• Bei der M3U8-Wiedergabe werden mehrere Dateien (M3U8, TS, KEY usw.) geladen.
• Fehlt bei nur einer Ressource der passende CORS-Header, schlägt die Wiedergabe fehl.
• Frontend-Technologien können Browser-Sicherheitsrichtlinien nicht umgehen.
• Die beste Lösung besteht darin, Access-Control-Allow-Origin auf dem Server zu aktivieren oder einen Reverse Proxy zu verwenden.

Wenn Sie regelmäßig M3U8-Links testen oder Wiedergabeprobleme analysieren, können Sie unseren Online-M3U8-Player verwenden. So lässt sich schnell feststellen, ob das Problem durch einen ungültigen Link, CORS-Einschränkungen oder die Videoquelle selbst verursacht wird.