Hello i’m using DatoCMS to upload mp4 videos or images to use as mapped textures with three.js in my vue + nuxt project.
But currently SOMETIMES, im getting a CORS error like so:
For images Access to image at 'https://www.datocms-assets.com/....examplepath here....png' from origin 'https://myurl.here' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://myurl.here' that is not equal to the supplied origin
Or
For videos: Access to fetch at 'https://stream.mux.com/....pathhere.../medium.mp4' from origin 'https://myurl.here' has been blocked by CORS policy: Request header field range is not allowed by Access-Control-Allow-Headers in preflight response.
Strangely, this problem happens sometimes, usually on first load. And if i have my chrome dev tools open, with ‘disable cache’ checked, this problem goes away. This happens on my localhost and also when i host it on netlify too
I’ve even tried adding crossorigin=“anonymous” attributes to the video element but this didnt solve anything.
Unfortunately this is fairly urgent If anyone has any idea how to solve this, i’ll be grateful!
Currently im appending a timestamp on the url as a last resort. The time stamps seem to solve the localhost issues but it still working on and off online.
I dont know what to do
Here’s just a snippet of how i’m using the video from the datocms query result in a for loop
let new_video = document.createElement('video');
new_video.className = "video_"+yy;
new_video.setAttribute('crossorigin', 'anonymous');
new_video.src = this.allArtists[yy].video.video.mp4Url+'?' + new Date().getTime()
yes i changed the link, as i didnt. want the url to be in the public domain for now.
is it possible to DM you or email you the link perhaps?
But actually right now, i’ve switched the videos over to Vimeo Pro and i have no issues now. So not sure if seeing the site now would be of use.
If anyone has any idea how to solve this, i’ll be grateful!