ローカル 3D モデルをロードするときに「クロスオリジンリクエストは HTTP でのみサポートされています」というメッセージが表示されるのはなぜですか?

エラー: ローカル ファイルのロード時に「クロス オリジン リクエストは HTTP でのみサポートされています」

JSONLoader を使用して Three.js に 3D モデルをロードしようとすると、ユーザーは「クロスオリジンリクエストはHTTPでのみサポートされています。」というエラーが発生します。この問題は、HTTP 以外のプロトコルを使用してローカル ファイルにアクセスした場合に発生します。

エラーの原因

エラー メッセージには、クロスオリジン リクエストが HTTP でのみサポートされていることが正確に示されています。ただし、この原因は、ローカル ファイルが通常「file://」または「C:/」プロトコルを使用してロードされるという事実に起因します。 RFC-6454 に従って、オリジンはスキーム、ホスト、ポートによって定義されます。この場合、ファイルと Web サイトが同じホスト (例: localhost) 上に存在しても、スキーム (ファイル / http) の違いにより、それらが異なる起源のものであることがマークされます。

ソリューション

この問題を解決するには、次の 2 つのアプローチが考えられます。

1.ローカル Web サーバーのインストール:

Apache や Nginx などのローカル Web サーバーをコンピューターにインストールします。次に、3D モデルをホストし、「http://」プロトコルを使用してアクセスするように Web サーバーを構成します。これにより、Web サイトと同じオリジンを使用してファイルが読み込まれることが保証されます。

2.モデルを外部ホストにアップロードします:

または、3D モデルを Google Cloud Storage や Amazon S3 などのサードパーティ ホスティング サービスにアップロードします。これにより、HTTP 形式の URL (例: "http://example.com/path/to/model") を使用してファイルにアクセスできるようになります。

以上がローカル 3D モデルをロードするときに「クロスオリジンリクエストは HTTP でのみサポートされています」というメッセージが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。