Angular 7 - Not allowed to load local resource - node.js

Question

I am trying to load a .gltf file that is in a local folder using three.js, however this error is being accused on console: "Not allowed to load local resource".
Already tried to run using http-server;
Tried to create a dist and run http-server from there;
Tried to give the browser permission (with google chrome, using the --allow-file-access-from-files option);
I've also rendered my .gltf file in an online renderer, just to make sure there's nothing wrong with the 3D model and everything went well.
typesccript class:
export class AppComponent {
title = 'three-app';
#ViewChild('rendererContainer') rendererContainer: ElementRef;
renderer = new THREE.WebGLRenderer();
scene = null;
camera = null;
mesh = null;
constructor() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 1000;
var loader = new GLTFLoader();
loader.load( 'C:\\Users\\x\\Desktop\\3dmodels\\box.gltf', function ( gltf ) {
this.scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
}
}
html:
<div #rendererContainer></div>
package.json:
{
"name": "three-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.2.0",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"core-js": "^2.5.4",
"ecstatic": "^3.0.0",
"rxjs": "~6.3.3",
"three": "^0.107.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.3",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Does anyone have any idea what might be going on?

Answer 1

I resolved using the "Web Server for Chrome" extension.
I created a local server, threw the 3D file there, then managed to load it by passing the local server URL. This extension has the option "Set CORS headers" which allows XMLHttpRequests from other origins.

Answer 2

you might want to try using a file URL. 'C:\Users\x\Desktop\3dmodels\box.gltf' isn't a URL, but 'file://C:\Users\x\Desktop\3dmodels\box.gltf' is.
Note, I don't have a Windows environment to try this in, so I'm not sure if that's a correct format, YMMV.