HTTP request blocked by CORS policy

Questions
,
1

I’m trying to load a 3D GLTF model from a python server I’m locally hosting, something like http://localhost:8000/navigate/to/GLTF.gltf. I’m using GLTFLoader with this code:

var loader = new THREE.GLTFLoader();
loader.load(
‘http://localhost:8000/TestObjects/scene.gltf’,
function (gltf){
scene.add(gltf.scene);
}
);

After running this it comes up with an error in a chrome browser opened with “start chrome --allow-file-access-from-files”:
“Access to XMLHttpRequest at ‘http://localhost:8000/navigate/to/GLTF.gltf’ from origin ‘file://’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
This only doesn’t work with localhosting, it works when I simply call the loader from my files normally, but I need to be able to pull a model from a local host. any suggestions?

EDIT: Formatting

2

You have to move the entire app (e.g. the index HTML file) on the same web server. It does not work if you open the application from file or from a different host. If you have to use for some reasons a different host, configure your web server so it correctly applies CORS header to the HTTP response.

BTW: It’s best to completely avoid the file protocol. More information about that topic in this guide:

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

3

Moving everything to the web server worked great, thank you!

4

Hi I had the same error when I tried to get glb models from the server. I was helped by installing the library (patch) and renaming uploads file to static as well as adding cors settings.
Here is a piece of code:

require(‘dotenv’).config();
const path = require(‘path’);
const express = require(‘express’);
const mongoose = require(‘mongoose’);
const cors = require(‘cors’);

const app = express();
const port = 4000;

app.use(cors());
app.use(‘/static’,express.static(path.join(__dirname, ‘/static’)));
app.use(express.json());
app.use((req, res, next) => {
res.setHeader(“Access-Control-Allow-Origin”, “*”);
res.setHeader(
“Access-Control-Allow-Headers”,
“Origin, X-Requested-With, Content-Type, Accept”
);
res.setHeader(“Access-Control-Allow-Methods”, “GET, POST, PUT, DELETE”);
next();
});

5

Thank you very much, I solved the problem taht was bothering me so long.