CORS blocking image in a-frames

Question

Why can I load a random image off the internet in regular HTML in an but run into this annoying CORS crap when in A-Frames?

a-frame code that runs in CORS error

        <a-assets>
            <img id="homeThumbnail" src="https://i.ytimg.com/vi/GJWuVwZO98s/maxresdefault.jpg" crossorigin="anonymous">
        </a-assets>

regular HTML code that displays the image just fine

<img src="https://i.ytimg.com/vi/GJWuVwZO98s/maxresdefault.jpg">

Try instead using ` `, and if that fixes the problem, and you want to know why, you can find an explanation in the answer at https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 (in the the middle part of the answer, after the code snippets). — sideshowbarker, Aug 26 '17 at 03:26
@sideshowbarker it still throws the `header requires` error, and doesn't seem to work https://jsfiddle.net/qftwzegd/2/ — Piotr Adam Milewski, Aug 28 '17 at 11:10

score 0 · Answer 1 · answered Aug 26 '17 at 02:28

You should download this image, and use it from Your server. Otherwise, you could upload it to imgur.com, or glitch.me, which both cause no CORS issues.

As far as i know, the CORS issue depends more on the server, then a-frame or three.js.

I tried using the native Three.js texture loaders, but the image does not want to load. This is because it can't receive enough information from the server, hence the console throws an error about getting no response:

components:texture:error '$s' could not be fetched (Error code: undefined; Response: undefined)

imgur.com, or most wikipedia pictures for instance causes no issues with their pictures.

Check out the error and a working imgur link at this fiddle.

CORS blocking image in a-frames

1 Answers1