1

I am learning three.js. I tried to display some text but I am getting CORS policy access blocked error on loading the font file. I have checked if the path passed is correct, tried putting the file in various locations, but still nothing. Here is my code to load the text:

var loader = new THREE.FontLoader();
loader.load('../Libraries/three.js-master/examples/fonts/gentilis_bold.typeface.json', function(font) {

  var geometry = new THREE.TextGeometry('Hello three.js!', {
    font: font,
    size: 80,
    height: 1,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelOffset: 0,
    bevelSegments: 5
  });
});

And the error I am getting is:

Access to XMLHttpRequest at 'file:///A:/Code/IIITH/computer-graphics-iiith/SRIP/Libraries/three.js-master/examples/fonts/gentilis_bold.typeface.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Can I please get help resolving this error? I am still learning three.js and don't know it in detail. What mistake am I making?

gman
  • 100,619
  • 31
  • 269
  • 393
Shantanu Shinde
  • 932
  • 3
  • 23
  • 48
  • In your browsers address bar, do you see `file://`? You can't do ajax calls if you server over the `file://` protocol. – zero298 May 24 '19 at 18:48
  • Possible duplicate of [File Protocol Ajax Request](https://stackoverflow.com/questions/34265680/file-protocol-ajax-request) – zero298 May 24 '19 at 18:50

1 Answers1

1

This problem is not related with Three.js.

It's a security measurement implemented by browsers to protect the users from multiple threats. You can find more details about how it works in this post:

"Cross origin requests are only supported for HTTP." error when loading a local file

This is how Three.js suggests that you deal with this restriction: How to run things locally

ScieCode
  • 1,706
  • 14
  • 23