HTTP クロスオリジン リクエストはサポートされていないため、ローカル ファイルをロードしようとするとエラーが発生します。

Question

JSONLoader を使用して、コンピュータにローカルに保存され、Web サイト全体と同じディレクトリにある 3D モデルを Three.js にロードしようとしています。

「HTTP のクロスオリジン要求のみがサポートされています。」 エラーが表示されますが、原因や修正方法がわかりません。

Answer 1

明確にしておきます - はい、このエラーは、ブラウザーで file://some/path/some.html

を直接指定できないことを示しています。

ここでは、ローカル Web サーバーを迅速に起動し、ブラウザーにローカル ファイルをレンダリングさせるためのいくつかのオプションを示します。

Python 2

Python がインストールされている場合...

1. コマンド

   cd /path/to/your/folder を使用します。ディレクトリをファイル some.html またはファイルが存在するフォルダーに変更します < /p>

2. コマンド

   python -m SimpleHTTPServer を使用して、Python Web サーバーを起動します。

これにより、

http://localhost:8000 でディレクトリ リスト全体をホストする Web サーバーが起動します。

カスタム ポートを使用できます
3. python -m SimpleHTTPServer 9000 リンクが表示されます: http://localhost:9000

このメソッドは、Python インストールに組み込まれています。

Python 3

同じ手順を実行しますが、次のコマンドを使用します

python3 -m http.server

VSコード

Visual Studio Code

を使用する場合は、Live Server 拡張機能をインストールして、ローカル Web サーバー環境を提供できます。 Node.js

または、より応答性の高いセットアップが必要で、すでに Nodejs を使用している場合...

「
1. npm install -g http-server

   」と入力して、http-server をインストールします。

2. some.html

   がある作業ディレクトリに切り替えます。

http-server -c-1
3. を発行して http サーバーを起動します。

   これにより、Node.js httpd が開始され、ディレクトリ内のファイルが静的ファイルとして提供されます。

   http://localhost:8080

から入手できます。

ルビー あなたの好みの言語が Ruby なら...Ruby の神様は、これもうまくいくと言っています:

リーリー

PHP

もちろん、PHP にもソリューションがあります。

リーリー

Answer 2

私の水晶玉は、file:// または C:/ を使用してモデルをロードしていると言っていますが、これは <代码>http:// # ではないため、エラー メッセージと一致します。

##したがって、ローカル PC に Web サーバーをインストールするか、モデルを別の場所にアップロードして jsonp を使用し、URL を http://example.com/path/to/model

に変更することができます。

Origin は

RFC-6454 で として定義されています リーリー

したがって、ファイルが同じホスト (

localhost) からのものであっても、スキームが異なる限り (http / file)、それらは異なるものとみなされます。 ）の由来。