TextureLoader - CORS problem when texture has external link

Questions
,
1

Hi everyone,

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…

This is my code:

const textureLoaderVideo = new TextureLoader()
textureLoaderVideo.crossOrigin = ""
textureLoaderVideo.load(url, (_texture) => {
    setTexture(_texture)
});

Any ideas?

Thanks a lot,
Jordi

2

try setting crossOrigin to “anonymous”

3

Hi @anidivr ,
thanks for your reply.
I already tried it, and it does not work… still the same error. any other ideas? thanks!

4

These two:

https://dashboard.jordigarreta.com
https://www.jordigarreta.com

might be considered different origins. Could you try with the same origin (either www... or dashboard...)?

2 Likes
5

True, either host and load from the same subdomain “dashboard.” or add a .htaccess file to the root of www that looks something like…

<IfModule mod_headers.c>
    SetEnvIf Origin "https://(?:www\.)?jordigarreta\.com$" AccessControlAllowOrigin=$0
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials "true"
</IfModule>
1 Like
6

Hi @PavelBoytchev and @Lawrence3DPK .
First of all, thanks for your replies.

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().

Any idea on that?

Thanks

7

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
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
    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

8

Hi @anidivr
I have tried using this code:

 const video = document.createElement('video')
video.src = url
video.loop = true
video.autoplay = true
video.muted = true
video.crossOrigin = "anonymous"

const texture = new THREE.VideoTexture( video );

but same problem… :frowning:
I’m completely lost on where to look for the problem. Thanks for your time :slight_smile:

9

Very odd, is the server you’re using apache? If so, adding a .htaccess file with the correct allow origin headers to the root of https://www.jordigarreta.com did not work for you?

And as @PavelBoytchev had suggested loading the resource from a directory in the same subdomain (https://dashboard.jordigarreta.com) as your project files also failed?

10

The problem is solved!! It was a .htaccess problem!!

I had to add these lines to the .htaccess

<FilesMatch "\.(ico|mp4|mov|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

So before I didnt had the FileMatch lines, and that’s reason of the problem.

Hope I can help people with this solution.

@Lawrence3DPK @anidivr @PavelBoytchev thanks for your replies! :slight_smile:

1 Like