クロスオリジンリクエストはHTTPでのみサポートされています。 ローカルファイルを読み込むときにエラーが発生します。

JSONLoader`を使って3DモデルをThree.jsに読み込ませようとしているのですが、その3DモデルがWebサイト全体と同じディレクトリにあります。

しかし、"Cross origin requests are only supported for HTTP."というエラーが発生しますが、原因も解決方法もわかりません。

ソリューション

私の水晶玉によると、モデルの読み込みには file:// または C:/ を使用しています。

ですから、ローカルPCにウェブサーバをインストールするか、モデルをどこかにアップロードして、jsonpを使い、URLをhttp://example.com/path/to/modelに変更してください。

OriginはRFC-6454で次のように定義されています。

   ...これらは同じ
   スキーム、ホスト、ポートが同じであること。  (詳細はセクション4を参照してください。)

つまり、ファイルの発信元が同じホスト(localhost)であっても、スキームが異なる(http / file)限り、別の発信元として扱われます。

解説 (15)

このエラーは、「file://some/path/some.html」を直接ブラウザで表示できないことを意味しています。

ローカルファイルをブラウザで表示させるために、ローカルのウェブサーバを素早く立ち上げるオプションは以下のとおりです。

Python 2

Pythonがインストールされていれば...

1.cd /path/to/your/folderというコマンドを使って、ファイルsome.html` があるフォルダに移動します。

2.2. コマンド python -m SimpleHTTPServer を使って、Python のウェブサーバを起動する。

これにより、Webサーバが起動し、ディレクトリリスト全体が http://localhost:8000 にホストされます。

3.カスタムポートを使用することができます python -m SimpleHTTPServer 9000 リンクを提供します。http://localhost:9000

この方法は、Pythonのインストールに組み込まれています。

Python 3

同じ手順を行いますが、代わりに以下のコマンドを使用します python3 -m http.server

Node.js

より反応の良いセットアップを求めていて、すでにnodejsを使用している場合は、次のようにします。

1.npm install -g http-serverと入力して、http-server`をインストールする。

2.あなたの`some.htmlがある作業ディレクトリに移動する。

3.http-server -c-1`と入力して、httpサーバーを起動する。

これにより、Node.jsのhttpdが起動し、ディレクトリ内のファイルを静的ファイルとして http://localhost:8080 からアクセスできるようになります。

Ruby

もしあなたの好みの言語が Ruby であるならば、Ruby の神々はこれも同様に機能すると言っています。

ruby -run -e httpd . -p 8080

PHP

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

php -S localhost:8000
解説 (10)

今日はこれに遭遇しました。

次のようなコードを書きました。

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

...しかし、次のようにすべきでした。

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

唯一の違いは、2番目のコードのスニペットに http:// がないことでした。

同じような問題を抱えている人がいるかもしれないので、このことを伝えたかったのです。

解説 (0)