I’m receiving this CORS error when trying to use TextureLoader with an external url.
Access to image at 'https://dashboard.jordigarreta.com/wp-content/uploads/2022/08/DNA.mp4' from origin 'https://www.jordigarreta.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
As you can see, both website are on the same server. Do you know how can I solve the problem ?
If I use the same url as a html tag, I don’t have the CORS problem…
I have tried what you said, and still the same CORS error.
One thing I noticed is that if I use the URL as a HTML tag, then I don’t have the error. Only happens when I’m trying to use it as a TextureLoader() or in React Three Fiber (DREI) as useTexture() or useTextureVideo().
Sometimes you have to just go with what works. Last year, when trying to load video from Pexels, I ran into a similar issue. The solution was this
// Create a video element and set the source
var video = document.createElement('video');
// crossorigin must be set to avoid error
video.crossOrigin = "anonymous";
video.loop = true;
this.video = video;
// Create a video texture from the video element
this.videoTexture = new VideoTexture(video);
Perhaps you can try something similar by loading the texture into a dynamic HTML image