為什麼 Three.js 在載入本機 3D 模型時會拋出「跨來源請求」錯誤，如何修復？

檔案系統互動的跨來源問題：解決Three.js 中的「跨來源請求」錯誤

嘗試整合本地儲存的3D時使用JSONLoader 將模型匯入Three.js 時，Web 開發人員經常遇到「跨來源請求僅支援HTTP」錯誤。此訊息暗示對網路請求原則及其約束存在根本性誤解。

問題的癥結在於網路安全和跨域資源共享 (CORS) 之間的相互作用。當 Web 應用程式嘗試存取跨來源內容時，瀏覽器會施加限制以防止惡意行為。跨來源請求本質上是從網頁向另一個網域發出的請求，如果沒有適當限制，可能會利用使用者資料。

在 Three.js 的上下文中，使用 file:// 或載入本機檔案C:/ 不屬於 CORS 所要求的 HTTP 協定範圍。因此，瀏覽器正確地阻止了跨來源請求，從而導致錯誤訊息。

要克服這個障礙，有兩個可行的解決方案：

1. 建立本地Web 伺服器： 在您的電腦上安裝Web 伺服器，並將3D 模型託管在該伺服器可存取的目錄中。透過 HTTP（例如，http://localhost:8080/model.json）存取模型，您可以規避跨域問題。
2. 將模型上傳到其他地方並使用 JSONP:將 3D 模型上傳到可公開存取的伺服器，並利用 JSONP（帶有 Padding 的 JSON）動態載入它。 JSONP 利用腳本元素跨網域請求外部資源的能力。將 URL 調整為 http://example.com/path/to/model，確保在伺服器端正確配置 CORS 標頭以允許跨來源請求。

了解以下內容的細微差別跨來源資源共享和接受複雜的 HTTP 協定對於解決在 Three.js 中使用本地 3D 模型時出現的「跨來源請求」錯誤至關重要。

以上是為什麼 Three.js 在載入本機 3D 模型時會拋出「跨來源請求」錯誤，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！