927

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

エラーが発生してい"Cross origin requests are only supported for HTTP."ますが、何が原因で、どのように修正するのかわかりません。

4

30 に答える 30

872

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) 場合、それらは異なる発信元として扱われます。

于 2012-05-25T09:42:55.293 に答える
691

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

ブラウザがローカル ファイルをレンダリングできるように、ローカル Web サーバーをすばやく起動するためのいくつかのオプションを次に示します。

パイソン 2

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

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

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

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

  1. python -m SimpleHTTPServer 9000リンクを提供するカスタムポートを使用できます ：http://localhost:9000

このアプローチは、すべての 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 の神々は、これも同様に機能すると言っています。

ruby -run -e httpd . -p 8080

PHP

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

php -S localhost:8000
于 2014-02-06T16:36:27.440 に答える
176

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

--allow-file-access-from-files

詳しくはこちらをご覧ください。

于 2014-05-20T11:36:24.070 に答える
72

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

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

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 番目のスニペットに がないことです。

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

于 2014-02-20T16:27:12.083 に答える
48

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

于 2016-12-16T03:01:06.907 に答える
21

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

于 2016-12-29T22:15:37.417 に答える
16

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

python -m http.server
于 2018-10-01T03:55:35.720 に答える
12

Python または Node.js を使用しない Windows の場合は、まだ軽量のソリューション、Mongooseがあります。

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

また、Z-WAMPは単一のフォルダーで実行される 100% ポータブルな WAMP です。これは、迅速な PHP および MySQL サーバーが必要な場合のオプションです。2013 年以降更新されていませんが、最新の代替手段はLaragonまたはWinNMPです。私はそれらをテストしていませんが、移植性があり、言及する価値があります。

また、絶対的な基本 (HTML + JS) のみが必要な場合は、何もインストールまたはダウンロードする必要のない小さな PowerShell スクリプトを次に示します。

$Srv = New-Object Net.HttpListener;
$Srv.Prefixes.Add("http://localhost:8080/");
$Srv.Start();
Start-Process "http://localhost:8080/index.html";
While($Srv.IsListening) {
    $Ctx = $Srv.GetContext();
    $Buf = [System.IO.File]::OpenRead((Join-Path $Pwd($Ctx.Request.RawUrl)));
    $Ctx.Response.ContentLength64 = $Buf.Length;
    $Ctx.Response.Headers.Add("Content-Type", "text/html");
    $Buf.CopyTo($Ctx.Response.OutputStream);
    $Buf.Close();
    $Ctx.Response.Close();
};

このメソッドは非常に必要最小限のものであり、ディレクトリやその他の凝ったものを表示することはできません。しかし、これらの CORS エラーは問題なく処理されます。

スクリプトを名前を付けて保存しserver.ps1、プロジェクトのルートで実行します。配置されたディレクトリで index.html を起動します。

于 2015-03-04T05:24:18.360 に答える
7

一部の回答ですでに言及されていると思われますが、これを少し変更して、完全に機能する回答を作成します（見つけて使用しやすくします）。

  1. https://nodejs.org/en/download/にアクセスします。node.js をインストールします。

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

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

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

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

于 2018-08-28T16:07:05.170 に答える
4

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

于 2014-11-10T14:14:32.793 に答える
2

皆さんのためにMacOS... シンプルなLaunchAgentをセットアップして、これらの魅力的な機能を自分のChromeのコピーで有効にします...

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

多田！

于 2016-07-05T00:37:59.713 に答える
1

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

于 2016-06-08T03:16:38.303 に答える
1

ええと。私はいくつかの公式の言葉を見つけたところです。ビルド システム)" https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

于 2015-09-07T10:08:20.177 に答える
0

これには多くの問題があります。私の問題には「/」があり ません。 /getList_tagLabels/

この問題に遭遇した人にとって、これが役立つことを願っています。

于 2016-07-12T05:31:05.193 に答える