在 Three.js 中使用 OBJLoader 时出现 CORS 问题 [重复]答案

【问题标题】：CORS issue when using OBJLoader in Three.js [duplicate]在 Three.js 中使用 OBJLoader 时出现 CORS 问题 [重复]
【发布时间】：2019-07-30 06:52:26
【问题描述】：

我正在尝试使用 OBJLoader 从我的系统加载一个对象，但我总是收到 CORS 错误告诉我：

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.

这是我的代码（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");
  }
);

这是我的 HTML 文件：

<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>

我在本地使用 Three.js。我是 Three.js 的新手，所以我不知道哪里出错了。请帮我解决这个问题。

【问题讨论】：

标签： javascript three.js cors

【解决方案1】：

您必须使用本地网络服务器以避免此安全错误。关闭浏览器中的安全策略是另一种选择，但不推荐。

请阅读以下指南了解更多信息：https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

【讨论】：

如果我运行本地 python web 服务器； firefox 仍然返回CORS header ‘Access-Control-Allow-Origin’ missing，即使引用像graphics.stanford.edu/courses/cs148-10-summer/as3/code/as3/…这样的外部源
好吧，如果主机没有配置 CORS，您不能只从不同的域加载 3D 资产。这与在本地服务器上运行您的应用无关。