Threejs Model 正在加載：“訪問 XMLHttpRequest .. 來自原 'null' 的訪問已被 CORS 策略阻止”- 如何在本地測試？ 還是簡單上傳？

Question

我在本地玩 three.js 與單個 HTML 頁面，我想玩玩加載和移動 3D ZA8CFDE6331BD59EB26ACZF64 文件。 從示例代碼中，我復制了以下內容：

var loader = new THREE.AMFLoader(); 

                loader.load( './models/rook.amf', function ( amfobject ) { //'./models/rook.amf'

                    scene.add( amfobject );
                    render();

                } );

在 Chrome 中，我收到以下錯誤：

Access to XMLHttpRequest at 'file:///C:/Users/me/Desktop/project/models/rook.amf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

有什么簡單安全的方法可以解決這個問題並重新開始學習threejs？ 我可以在某處添加某種權限代碼嗎？ 將我的 3D model 上傳到某處並從 http 位置加載（如果是這樣，我在哪里可以輕松免費地執行此操作）？

Answer 1

有兩種方法可以解決這個問題：

1.更改瀏覽器中本地文件的安全性。 對於 chrome，這可以通過搜索 Chrome 可執行文件的路徑，然后在 cmd 上完成：

> "C:\PathTo\Chrome.exe" --allow-file-access-from-files

2.從本地 web 服務器運行文件。 這允許您以以下方式訪問您的頁面：

http://localhost/yourFile.html

您可以在此處獲取更多信息以運行本地服務器

Answer 2

您可以使用簡單的服務器來提供 html 文件，而不是直接提供文件路徑： https://www.npmjs.com/package/http-server 。

打開一個終端：

cd ./Users/me/Desktop/project/
npm install --global http-server
http-server -p 4200

這將在默認瀏覽器上的 http://localhost:4200/ 處提供 index.html 文件。