Three.js でローカル ファイルを読み込むときに発生する「クロスオリジン リクエストは HTTP でのみサポートされています」エラーを修正する方法

Three.js を使用したローカル ファイルのロード: クロス オリジン リクエストのトラブルシューティング

JSONLoader を使用してローカル 3D モデルを Three.js にロードしようとする場合、「クロスオリジンリクエストはHTTPでのみサポートされています。」というメッセージが表示される場合があります。エラー。このエラーは、ローカル ファイルと Web ブラウザ間のプロトコルの違いが原因で発生します。

エラーの原因

このエラーは、ブラウザがクロスオリジン リクエストを制限しているために発生します。デフォルトでは。セキュリティ上の理由から、Web サイトがさまざまな発信元のリソースにアクセスするのを防ぎます。コンピュータからローカル ファイルをロードすると、ブラウザはそのファイルのオリジンが Web サイトとは異なるものとみなし、Web サイトは通常 HTTP 経由で提供されます。

エラーの修正

このエラーを解決するには、次の 2 つのオプションがあります。

1. ローカル Web サーバー:

   • XAMPP や Apache などの Web サーバーをローカル コンピューターにインストールし、サーバー上で 3D モデルをホストします。
   • JSONLoader の URL を変更します。上のモデルのパスにwebserver.

2. モデルをリモートでアップロード:

   • 3D モデルを GitHub などのリモート サーバーにアップロードします。 AWS S3、または無料のホスティング サービス。
   • の URL を更新します。リモート URL への JSONLoader。

オリジンについて

オリジンは、スキーム、ホスト、ポートの組み合わせとして定義されます。この場合、スキーム (HTTP/ファイル)、ホスト (localhost)、およびポート (通常は 80) が異なります。 RFC-6454 に記載されているように、「...それらは同じスキーム、ホスト、ポートを持っています。」したがって、ファイルの生成元が同じホストであっても、スキームが異なると生成元も異なります。

これらの解決策に従うことで、ローカル 3D モデルを Three.js に正常にロードし、「クロスオリジンリクエスト」を回避できます。 HTTP でのみサポートされます。」エラー。

以上がThree.js でローカル ファイルを読み込むときに発生する「クロスオリジン リクエストは HTTP でのみサポートされています」エラーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。