Why does the code crash in an a-frame, with the error 'core: a-assets warn Asset loading timed out 3000ms'?

Question

My code worked in the morning. I made a few changes and it stopped working. I ran the code reverted to the earlier version and it also stopped working with the following warning in the debug console of visual studio code:

A-Frame:error This HTML file is currently being served via the file:// protocol. Assets, textures, and models WILL NOT WORK due to cross-origin policy! Please use a local or hosted server: https://aframe.io/docs/0.5.0/introduction/getting-started.html#using-a-local-server. 
aframe.io/releases/1.2.0/aframe.min.js:23
A-Frame Version: 1.2.0 (Date 2021-02-05, Commit #b220fa00)
aframe.io/releases/1.2.0/aframe.min.js:2682
THREE Version (https://github.com/supermedium/three.js): ^0.125.1
aframe.io/releases/1.2.0/aframe.min.js:2682
WebVR Polyfill Version: ^0.10.12
aframe.io/releases/1.2.0/aframe.min.js:2682
Uncaught Event
core:a-assets:warn Asset loading timed out in   3000 ms
releases/1.2.0/node_modules/debug/browser.js:111

This is the error in the browser console:

I can't figure out why it is not working. I have also used crossorigion=null Here's the complete code:

<html>
    <head>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
        
    </head>
    <body>
        <a-scene>
            <!-- Asset Management System -->
            <a-assets>
                <img id="space" src="space.jpg" crossorigin=null>
                <a-asset-item id="spaceship" response-type="arraybuffer" src="spaceship.glb" ></a-asset-item>
            </a-assets>

            <!-- Sky -->
            <a-sky src="#space"></a-sky>

            <!-- Spaceship -->
            <a-entity gltf-model="#spaceship" scale="0.1 0.1 0.1" animation-mixer="clip: CubeAction; loop: infinite" visible="" position="0 1.096 0" rotation="65.1693655337701 179.9998479605043 0"></a-entity>

            <!-- Camera -->
            <a-camera  position="0 3.0 0" ></a-camera>
        </a-scene>
    </body>
</html>

https://stackoverflow.com/questions/41965066/access-to-image-from-origin-null-has-been-blocked-by-cors-policy I have tried to use the answer with 17 votes — Psychonaut007, Nov 18 '21 at 13:59
Earlier it was working. I even upvoted it but the same answer in now being incompetent — Psychonaut007, Nov 18 '21 at 14:01
like other answers to that link, use a local file server, with python, and read the link with the (49) answer on how CORS works — rioV8, Nov 18 '21 at 14:04
Does that mean If run the same program in Dotnet core. Which will use a local file server. Won't cause the issue. — Psychonaut007, Nov 18 '21 at 14:09

score 1 · Answer 1 · answered Nov 18 '21 at 16:55

My problem was that I wasn't using CORS in write manner. My files in the project are exposed at with extentions "C:/" whereasa cross orgion response request supports only https and remaining other mentioned in screenshot. It can be big problem to security therefore in order to avoid it make a server.

https://stackoverflow.com/a/33801287/16972919

score 0 · Answer 2 · answered Feb 21 '22 at 20:41

In my case, Coding in VSCode

Install extension "Live Server"
move your file to the current directory that you coded
access or call your file like => ./yourFileName.glb
Open live server at the right bottom of VS Code, That's it

Holp this helps :)

Why does the code crash in an a-frame, with the error 'core: a-assets warn Asset loading timed out 3000ms'?

2 Answers2