「僅 HTTP 支援跨來源請求。」載入本機檔案時發生錯誤

Question

我正在嘗試使用 JSONLoader 將本地存儲在計算機上的 3D 模型加載到 Three.js 中，並且該 3D 模型與整個網站位於同一目錄中。

我收到「跨來源請求只支援 HTTP。」 錯誤，但我不知道是什麼原因導致的，也不知道如何修復它。

Answer 1

明確地說 - 是的，錯誤表明您無法將瀏覽器直接指向 file://some/path/some.html

這裡有一些選項可以快速啟動本機網路伺服器，讓您的瀏覽器呈現本機檔案

Python 2

如果你安裝了Python...

1. 使用指令cd /path/to/your/folder將目錄變更為檔案some.html或檔案所在的資料夾

2. 使用指令 python -m SimpleHTTPServer

   啟動 Python Web 伺服器

這將啟動一個網站伺服器來託管您的整個目錄列表，網址為http://localhost:8000

3. #您可以使用自訂連接埠 python -m SimpleHTTPServer 9000 為您提供連結：http://localhost:9000

#此方法內建於任何 Python 安裝中。

Python 3

執行相同的步驟，但使用以下命令python3 -m http.server

#VSCode

如果您使用Visual Studio Code，您可以安裝Live Server 擴展，提供本機 Web 伺服器環境。

Node.js

或者，如果您需要更具回應性的設定並且已經使用了 Nodejs...

1. 透過輸入 npm install -g http-server 安裝 http-server

2. 切換到您的工作目錄，some.html 所在的位置

3. 透過發出http-server -c-1啟動您的http伺服器

這會啟動 Node.js httpd，它將目錄中的檔案作為靜態檔案提供，可從 http://localhost:8080

紅寶石

如果您的首選語言是 Ruby ...Ruby Gods 說這也有效：

ruby -run -e httpd . -p 8080

PHP

當然PHP也有它的解。

php -S localhost:8000

Answer 2

我的水晶球說您正在使用file:// 或C:/ 載入模型，這與錯誤訊息相符，因為它們不是http://

因此，您可以在本機 PC 上安裝網頁伺服器，也可以將模型上傳到其他位置並使用 jsonp 並將 url 變更為 http://example.com/path/to/型號

起源在 RFC-6454 中定義為

...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

因此，即使您的檔案源自同一主機(localhost)，但只要方案不同(http / file ），它們被視為不同的來源。