I have just deployed a site (https://nifty-fifty.netlify.app) and I’m getting an error in Chrome:
“…has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” I’m trying to show an mp4 video file which I’ve uploaded to GitHub and it’s this that’s throwing the error. I understand that this is a security issue but I would have thought that this was allowed as the file resides in GitHub. I know very little about this issue but this is quite important to me so would appreciate any help. Thanks for your time. Jimi.
I am unable to replicate the issue on the site. Can you share the steps needed to reproduce this issue?
In any event the CORS error likely stems from the fact the server where the content is hosted doesn’t allow the site that is trying to load the content permission to do so. If you manage the server, you need to add the Access-Control-Allow-Origin header. If you don’t manage the server there is little you can do about it.
Hi jasiqli
To replicate the issue, you would have to navigate to the game screen and click on the ‘Show me how’ button. This is supposed to play an mp4.
The server is Netlify’s and the site was built from files stored in GitHub. Surely, there is some way for Netlify to allow you to configure this to change these Headers?
The issue is GitHub is not allowing you to load the resource. You cannot change this.
If you navigate to the URL https://github.com/Jimi775/video/blob/main/Recording%20%233.mp4 and select “View raw” you are taken to the following URL https://raw.githubusercontent.com/Jimi775/video/main/Recording%20%233.mp4. This URL does have the Access-Control-Allow-Origin header set that should allow the video to load correctly.
Hi jasiqli
It works! Thank you so much. Some good karma is coming your way! Thank you again.