CORS issue when using OBJLoader in Three.js [duplicate]

Question

I'm trying to load an object from my system using OBJLoader but I'm always getting CORS error telling me this:

Access to XMLHttpRequest at 'file:///Users/pranayankittiru/Desktop/tasks/resources/Pix.obj' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Here is my code(task1.js):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// instantiate the loader
var loader = new THREE.OBJLoader();

loader.load(
  "resources/Pix.obj",
  function(object) {
    scene.add(object);
  },
  function(xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  function(error) {
    console.log("An error has occured");
  }
);

Here is my HTML file:

<html>
    <head>
        <meta charset="utf-8">
        <title>Task-1</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/loaders/ObjectLoader.js"></script>
        <script src="task1.js"></script>
    </body>
</html>

I'm using Three.js locally. I'm new to Three.js so I don't know where I'm going wrong. Please help me on this.

Mugen87 · Accepted Answer · 2019-03-08 10:30:40Z

3

You have to use a local web server in order to avoid this security error. Turning off the security policies in your browser is another option but not recommended.

Please read the following guide fore more information: https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

answered Mar 8, 2019 at 10:30

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joost Döbken Over a year ago

If I run a local python web server; firefox still returns CORS header ‘Access-Control-Allow-Origin’ missing, even when refering to an external source like graphics.stanford.edu/courses/cs148-10-summer/as3/code/as3/…

Mugen87 Over a year ago

Well, you can't just load 3D assets from a different domain if CORS is not configured by the host. This has nothing to do with running your app on a local server.

Collectives™ on Stack Overflow

CORS issue when using OBJLoader in Three.js [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related