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

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

私は取得しています"Cross origin requests are only supported for HTTP."エラーが、私はそれを引き起こしても、どのようにそれを修正するだか分かりません。

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

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

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

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

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

ただ明確にするために-はい、エラーはブラウザを直接に向けることができないことを示しています file://some/path/some.html

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

Python 2

Pythonがインストールされている場合...

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

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

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

3. あなたは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. あなたの作業ディレクトリ、あなたへの変更some.htmlの生活

3. 次のコマンドを発行して、httpサーバーを起動します。 http-server -c-1

これはNode.js httpdを起動し、ディレクトリ内のファイルを静的ファイルとしてサービスから提供します。 http://localhost:8080

ルビー

優先言語がRubyである場合、Ruby Godsはこれも機能すると言います。

ruby -run -e httpd . -p 8080

PHP

もちろん、PHPにもソリューションがあります。

php -S localhost:8000

Chromeでは、次のフラグを使用できます。

--allow-file-access-from-files

詳細はこちら。

今日これに出会った。

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

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;
    });
});

唯一の違いは、http://コードの2番目のスニペットの欠如でした。

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

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

Androidアプリでは-たとえば、経由JavaScriptが資産へのアクセスを持つことができるようにfile:///android_asset/使用- setAllowFileAccessFromFileURLs(true)上のWebSettingsあなたが呼び出しから取得することgetSettings()にWebView。

http://またはhttps://を使用してURLを作成します

エラー：localhost:8080

ソリューション：http://localhost:8080

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

python -m http.server

私はリストに行くよ3つの異なるアプローチを、この問題を解決するために：

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

PythonやNode.jsのないWindowsを使用している場合でも、軽量のソリューションであるMongooseがあります。

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

また、Z-WAMPは100％ポータブルなWAMPであり、単一のフォルダーで実行できます。簡単なPHPとMySQLサーバーが必要な場合、これはオプションです。

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

PS驚いたことに、IntenetExplorer_Edgeはまったく問題なく動作します!!!

VSコードを使用する人のための簡単なソリューション

しばらくの間、このエラーが発生しています。ほとんどの答えが機能します。しかし、私は別の解決策を見つけました。node.jsここで対処したくない、または他のソリューションを使用したくない場合、HTMLファイルで作業している（別のjsファイルから関数を呼び出す、またはjson APIをフェッチする）場合は、Live Server拡張機能を使用してみてください。

ライブサーバーを簡単に開くことができます。localhostサーバーを作成するため、問題は解決しています。localhostHTMLファイルを開いてエディターを右クリックし、をクリックするだけで開始できますOpen with Live Server。

基本的http://localhost/index.htmlにはを使用する代わりにを使用してファイルをロードしますfile://...。

編集する

.htmlファイルは必要ありません。ショートカットを使用してLive Serverを起動できます。

ヒット(alt+L, alt+O)のOpen Serverにし、(alt+L, alt+C)サーバーを停止します。[MAC cmd+L, cmd+Oおよびcmd+L, cmd+C]

それが誰かを助けることを願っています:)

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

これらの種類のアプリケーションをローカルホストで実行するには、ミニサーバーを使用することをお勧めします（組み込みサーバーを使用していない場合）。

以下は、セットアップと実行が非常に簡単なものです。

https://www.npmjs.com/package/tiny-server

私はそれがいくつかの回答ですでに言及されていると思いますが、これを少し修正して完全に機能する回答を得ます（見つけやすく、使いやすい）。

1. ：に移動しますhttps://nodejs.org/en/download/。nodejsをインストールします。

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

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

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

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

それは単にアプリケーションがウェブサーバー上で実行されるべきだと言っています。Chromeでも同じ問題が発生しました。Tomcatを起動し、アプリケーションをそこに移動しましたが、動作しました。

えー 私はいくつかの公式の言葉を見つけました「クロスオリジンのセキュリティ制限により、dojo / textプラグインを使用するビルドされていないリモートAMDモジュールをロードしようとすると失敗します。（ビルドされたバージョンのAMDモジュールは、dojo / textへの呼び出しがビルドシステム。） " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

ローカルファイルの読み込みが機能する1つの方法は、プロジェクトフォルダーの外ではなく、プロジェクトフォルダー内でそれらを使用することです。画像用に作成した方法と同様に、プロジェクトのサンプルファイルの下に1つのフォルダーを作成し、プロジェクトパス以外の完全なローカルパスを使用し、プロジェクトフォルダーの下のファイルの相対URLを使用するセクションを置き換えます。それは私のために働いた

すべての人のためにMacOS... 独自のChromeでこれらの魅力的な機能を有効にするためのシンプルなLaunchAgentをセットアップしてください...

と同じような内容で何でも（例えば）plistという名前のを保存します...launch.chrome.dev.mode.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>

それはする必要があり、起動時に起動..しかし、あなたは、端末のコマンドでいつでもそうするように強制することができます

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

多田！😎💁🏻🙊🙏🏾

• TomcatなどのJava用のローカルWebサーバーをインストールします。PHPの場合はランプなどを使用できます。
• jsonファイルをパブリックアクセス可能なアプリサーバーディレクトリにドロップします

• 

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

サーバーなしでは静的ローカルファイル（例：svg）をロードできません。マシンにNPM / YARNがインストールされている場合は、「http-server」を使用して単純なhttpサーバーをセットアップできます。

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

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

これに関する多くの問題があり、私の問題には「/」の例がありません：jquery-1.10.2.js：8720 XMLHttpRequest cannot load http：// localhost：xxxProduct / getList_tagLabels / It's must be：http：// localhost：xxx / Product / getList_tagLabels /

私はこの問題に出くわした人たちのためにこの手助けを願っています。

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

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

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

cursor:pointer;

Linux Pythonユーザーの場合：

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

あなたが実行することを主張する場合 .htmlファイルをローカルし、ウェブサーバーで提供しないと、問題のあるリソースをインラインで利用できるようにすることで、最初にクロスオリジンリクエストが発生するのを防ぐことができます。

を.js介してファイルを提供しようとすると、この問題が発生しましたfile://。私の解決策は、<script src="...">タグをで置き換えるようにビルドスクリプトを更新することでした<script>...</script>。ここにありますgulpを行うためアプローチを示します。

1.実行しnpm install --save-devたパッケージにgulp、gulp-inlineそしてdel。

2. gulpfile.jsルートディレクトリにを作成した後、次のコードを追加します（ファイルパスを適切に変更します）。

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. gulp bundle-for-localビルドスクリプトを実行または更新して、自動的に実行します。

あなたは私のケースの詳細な問題と解決策をここで見ることができます。

コルドバはこれを達成します。私はまだコルドバがどのようにしたか理解できません。shouldInterceptRequestも通過しません。

後で、ローカルからファイルをロードするためのキーは、myWebView.getSettings（）。setAllowUniversalAccessFromFileURLs（true）;であることがわかりました。

また、任意のhttpリソースにアクセスする場合、WebViewはOPTIONSメソッドを使用してチェックを行います。これにより、応答を返すことでWebViewClient.shouldInterceptRequestを介してアクセスを許可でき、次のGET / POSTメソッドの場合はnullを返すだけです。

最初にクロムのすべてのインスタンスを閉じます。

その後これに従ってください。

Macでこのコマンドを使用しました。

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files

Windowsの場合：

「--allow-file-access-from-files」モードでChromeを使用してhtmlを起動する方法

オフラインビュー用のページをダウンロードしたときにこれを経験しました。

すべてのおよびタグからintegrity="*****"およびcrossorigin="anonymous"属性を削除する必要がありました<link><script>