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
)限り、別の発信元として扱われます。
このエラーは、「file://some/path/some.html」を直接ブラウザで表示できないことを意味しています。
ローカルファイルをブラウザで表示させるために、ローカルのウェブサーバを素早く立ち上げるオプションは以下のとおりです。
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のインストールに組み込まれています。
同じ手順を行いますが、代わりに以下のコマンドを使用します python3 -m http.server
。
より反応の良いセットアップを求めていて、すでに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 -run -e httpd . -p 8080
もちろん、PHPにも解決策があります。
php -S localhost:8000
今日はこれに遭遇しました。
次のようなコードを書きました。
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://
がないことでした。
同じような問題を抱えている人がいるかもしれないので、このことを伝えたかったのです。