web-dev-qa-db-ja.com

「クロスオリジン要求はHTTPでのみサポートされています。」ローカルファイルをロードするときのエラー

JSONLoaderを使ってThree.jsに3Dモデルをロードしようとしていますが、その3DモデルはWebサイト全体と同じディレクトリにあります。

"Cross Origin requests are only supported for HTTP."エラーが発生しましたが、それが原因で何が原因でそれを修正するのかもわかりません。

javascriptfilehttp3dthree.js
691
corazza

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

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

起源は RFC-6454 で定義されています

   ...they have the same
   scheme, Host, and port.  (See Section 4 for full details.)

したがって、ファイルは同じホスト（localhost）から生成されますが、スキームが異なる（http/file）限り、それらは異なる生成元として扱われます。

750
Andreas Wong

ただ明示的に - はい、エラーはあなたが直接あなたのブラウザをfile://some/path/some.htmlに向けることができないということです

ブラウザにローカルファイルを表示させるためにローカルWebサーバをすばやく起動するためのオプションがいくつかあります。

Python 2

Pythonがインストールされているなら...

  1. some.htmlコマンドを使用して、ファイルcd /path/to/your/folderまたはファイルが存在するフォルダにディレクトリを変更します。

  2. python -m SimpleHTTPServerコマンドを使用してPython Webサーバーを起動します。

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

  1. あなたはあなたにリンクを与えるカスタムポートpython -m SimpleHTTPServer 9000を使うことができます：http://localhost:9000

このアプローチはPythonのインストール環境に組み込まれています。

Python 3

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

Node.js

あるいは、より応答性の高い設定が必要で、すでにnodejsを使用している場合は...

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

  2. Yoursome.htmlが存在する作業ディレクトリに移動します。 

  3. http-server -c-1を発行してhttpサーバーを起動します

これはhttp://localhost:8080からアクセス可能な静的ファイルとしてあなたのディレクトリのファイルを提供するNode.js httpdを回転させます

ルビー

あなたの好みの言語がRubyであるなら... Rubyの神々はこれが同様に働くと言います：

Ruby -run -e httpd . -p 8080

PHP

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

php -S localhost:8000
536
Scott Stensland

Chromeでは、このフラグを使うことができます：

--allow-file-access-from-files

もっと読む

150
user669677

今日はこれに走った。

私はこのように見えるいくつかのコードを書きました：

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://がないことです。

同様の問題を抱えている人が他にいる場合に備えて、それをそこに出したかっただけです。

56
James Harrington

URLをlocalhostではなくhttp://localhostに変更するだけです。 localからhtmlファイルを開く場合は、そのhtmlファイルを扱うローカルサーバーを作成する必要があります。最も簡単な方法は Web Server for Chrome を使用することです。これで問題は解決します。

31
Finn

Androidアプリで - たとえば、JavaScriptがfile:///Android_asset/を介してアセットにアクセスできるようにするには、WebSettingsでsetAllowFileAccessFromFileURLs(true)を呼び出して取得したWebViewでgetSettings()を使用します。

12
CommonsWare

PythonもNode.jsもないWindows上では、まだ軽量の解決策があります：Mongoose。

実行可能ファイルをサーバーのルートにあるべき場所にドラッグして実行するだけです。アイコンがタスクバーに表示され、デフォルトのブラウザでサーバーに移動します。

また、 Z-WAMP は単一のフォルダで実行される100％ポータブルのWAMPです。クイックPHPおよびMySQLサーバーが必要な場合はこれが選択肢です。

10
bryc

Mozilla Firefoxを使用している場合は、問題なく動作します。 

P.S IE_Edgeでさえ、驚くほどうまく機能します。

8
Yash P Shah

私にとって最速の方法は次のとおりでした：WindowsユーザーがFirefoxでファイルを実行して問題を解決するか、chromeを使用する場合、Python 3をインストールしてからコマンドプロンプト実行コマンドpython -m http.server次に http：// localhost：8000 / に移動し、ファイルに移動します

python -m http.server
8
Rida

私はこの問題を解決するために3つの異なるアプローチをリストアップするつもりです： 

  1. 非常に軽量なnpmパッケージを使う： live-server using npm install -g live-server。次に、そのディレクトリに移動して端末を開き、live-serverと入力してEnterキーを押します。ページはlocalhost:8080で提供されます。ボーナス：それはまたデフォルトでホットリロードをサポートしています。
  2. Googleによって開発された軽量のGoogle Chrome app を使用：次にアプリをインストールし、Chromeの[アプリ]タブに移動してアプリを開きます。アプリでそれを正しいフォルダに向けます。あなたのページが配信されます！
  3. ウィンドウ内のChromeショートカットの変更：Chromeブラウザのショートカットを作成します。アイコンを右クリックしてプロパティを開きます。プロパティで、targetを"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"に編集して保存します。それからChromeを使ってctrl+oを使ってページを開きます。注：NOTは通常の閲覧にこのショートカットを使用してください。
7
BlackBeard

URLを作成するにはhttp://またはhttps://を使用してください 

エラー ：localhost:8080

解決策 ：http://localhost:8080

4
KARTHIKEYAN.A

ローカルディレクトリからjsonファイルを使用しているブラウザでHTMLファイルをロードするとき、私はこの正確なエラーを得ていました。私の場合は、静的コンテンツを処理できる単純なノードサーバーを作成することでこれを解決できました。私はこれのためにこのコードを残しました 他の答え 。

2
thehme

Localhostでこれらの種類のアプリケーションを実行するにはミニサーバーを使用することをお勧めします（内蔵サーバーを使用していない場合）。

これは、設定と実行が非常に簡単なものです。

https://www.npmjs.com/package/tiny-server
2
Deniss M.

それは単にアプリケーションがWebサーバー上で実行されるべきだと言うだけです。私はクロムと同じ問題を抱えていた、私はTomcatを始め、私のアプリケーションをそこに動かし、そしてそれはうまくいった。

1
Enayat Rajabi

私はそれがすでにいくつかの答えの中で言及されているのではないかと思うが、私はこれをわずかに修正して完全な実用的な答えを得よう（見つけやすく使いやすい）。

  1. https://nodejs.org/en/download/ にアクセスしてください。 nodejsをインストールしてください。

  2. コマンドプロンプトnpm install -g http-serverからコマンドを実行してhttp-serverをインストールします。

  3. index.html/yoursome.htmlが存在する作業ディレクトリに移動します。

  4. コマンドhttp-server -c-1を実行してhttpサーバーを起動します。

Webブラウザを開いて、http://localhost:8080 またはhttp://localhost:8080/yoursome.html - htmlファイル名に応じて - を開きます。

1
TarmoPikaro

次のhref付きのアンカータグを使用すると、このエラーメッセージを再現することもできました。 

<a href="javascript:">Example a tag</a>

私の場合、タグは 'Pointer Cursor'を取得するために使用されており、イベントは実際にはクリックイベントのjQueryによって制御されていました。 hrefを削除して、適用されるクラスを追加しました。

cursor:pointer;

0
mgilberties

すべてのあなたにとってMacOS...シンプルな LaunchAgent を設定して、 Chrome の自分のコピーでこれらの魅力的な機能を有効にしてください。

whatever （launch.chrome.dev.mode.plistなど）という名前のplistを~/Library/LaunchAgentsに保存します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

起動時に should で起動する必要がありますが、terminalコマンドを使用していつでも強制的に起動できます。

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA！ ???? ???????? ???? ????????

0
Alex Gray

サーバなしで静的ローカルファイル（例：svg）をロードすることはできません。あなたのマシンにNPM/YARNがインストールされていれば、 " http-server "を使って簡単なhttpサーバーをセットアップすることができます。 

npm install http-server -g
http-server [path] [options]

またはそのプロジェクトフォルダでターミナルを開き、 "hs"と入力します。 HTTPライブサーバーを自動的に起動します。

0
sujithklr93

あー。 「dojo/textプラグインを使用する未ビルドのリモートAMDモジュールをロードしようとしても、Origin間のセキュリティ制限のために失敗することがあります。ビルドシステムです。 "" https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

0
YUIOP QWERT
  • TomcatなどのJava用のローカルWebサーバーをインストールします。phpの場合はランプなどを使用できます
  • 公開されているアクセス可能なアプリケーションサーバーディレクトリにjsonファイルをドロップします。

  • List item

  • アプリサーバーを起動すると、localhostからファイルにアクセスできるはずです。

0
Fred Ondieki

ローカルファイルをロードする方法の1つは、プロジェクトフォルダの外部ではなくプロジェクトフォルダでそれらを使用することです。プロジェクトのサンプルファイルの下に1つのフォルダを作成してイメージ用に作成したのと同じようにして、プロジェクトパス以外の完全なローカルパスを使用するセクションを置き換えます。 

0
Naga Sai A