One of our customers at work uses a TYPO3 CMS to manage the website's content, and files are stored on a S3-compatible MinIO server running on a files. subdomain. Uploading and using a .vtt subtitle file for a .mp4 video did not work - the video played, but the subtitles were not available.
Firefox showed the following (German) error:
Quellübergreifende (Cross-Origin) Anfrage blockiert:
Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf
https://files.example.org/video.mp4.
(Grund: CORS-Anfrage schlug fehl). Statuscode: (null).
In the network tab it showed Not same-origin
.
Chromium's error message in English:
Unsafe attempt to load URL https://files.example.org/subtitles.vtt from frame with URL https://www.example.org/. Domains, protocols and ports must match.
CORS?
At first I thought the MinIO server did not send CORS headers, but it automatically sets them already:
Your application has a bug - we support CORS by default on all requests. On the browser or your client you need to set the valid Origin: HTTP header
CORS headers were a red herring.
crossorigin attribute
It turned out that the HTML <video> tag has a crossorigin attribute. Setting it to anonymous fixed the issue and subtitles were loaded:
<video controls="controls" no-cookie="" crossorigin="anonymous"> <source src="https://files.example.org/video.mp4" type="video/mp4"/> <track label="Deutsch" kind="subtitles" srclang="de" src="https://files.example.org/subtitles.vtt"/> </video>