書き換えられたタイトルは「ローカル ファイルのロード時に「クロスドメイン リクエストは 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 または file を含むフォルダーに移動します。

コマンドを使用します
2. python -m SimpleHTTPServer

   Python Webサーバーを開始します

これにより、

http://localhost:8000

で Web サーバーが起動し、ディレクトリ リスト全体をホストします

カスタム ポートを使用できます

python -m SimpleHTTPServer 9000
3. 、リンクは次のとおりです: http://localhost:9000
このメソッドは、Python インストールに組み込まれています。

Python 3

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

python3 -m http.server

VSコード

Visual Studio Code

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

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

1. npm install -g http-server

   Installhttp-server と入力します。

2. some.html

   を含む作業ディレクトリに切り替えます。

3. http-server -c-1

   を発行して http サーバーを起動します。

   これにより、ディレクトリ内のファイルを
http://localhost:8080

からアクセスできる静的ファイルとして提供する Node.js httpd が開始されます。 ルビー

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

リーリー

PHP

もちろん、PHP にも解決策があります。

リーリー

Answer 2

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

したがって、ローカル マシンに Web サーバーをインストールするか、モデルを別の場所にアップロードし、jsonp を使用して URL を http://example.com/path/ to/ に変更します。モデル＃＃＃＃＃＃ Origin は

RFC-6454

で定義されています リーリー したがって、ファイルが同じホスト (

localhost

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