I'm getting an error message related to Access-Control-Allow-Origin

Question

I'm working with a landing page that uses cdn plyr

<script src="https://cdn.plyr.io/3.3.10/plyr.js"></script> 
    <script>const player = new Plyr('#player');</script> 

I moved a video from local files to a server and changed the src="to new address form server" , but the video stopped working and I'm getting this error:

page.html:1 Failed to load https://www.video.mp4 : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://111.0.0.0:12121 ' is therefore not allowed access.

I tired different things, and even added another videos from other servers and it worked. except my video. The only thing that work is to add crossOrigin="anonymous" to the video tag and install Chrome extension But this wont work for other users, I need something permanent.

I also looked in to many answers:

How does Access-Control-Allow-Origin header work?

Videos not playing due to no Access Control Allow Origin

HTML5 video doesn't play with crossOrigin=“anonymous”

Please any ideas how to make this work?

Answer 1

This is a problem caused when you try to send request from a server that is different from the server you send request to. As in the comment was indicated, only the server you have uploaded your video to can control the header. But if it's your own server you can easily manipulate the code to allow request from different servers.

Answer 2

尝试此操作以获取有关如何在服务器上启用W3C CORS的参考