2

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.

Pranay Ankit
  • 217
  • 1
  • 5
  • 17

1 Answers1

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

Mugen87
  • 28,829
  • 4
  • 27
  • 50
  • 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 https://graphics.stanford.edu/courses/cs148-10-summer/as3/code/as3/teapot.obj – Joost Döbken Nov 22 '19 at 12:36
  • 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. – Mugen87 Nov 22 '19 at 13:16