web-dev-qa-db-ja.com

XMLHttpRequestはファイルをロードできません。クロスオリジン要求はHTTPでのみサポートされています

次のようなエラーが表示されます。

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross Origin requests are only supported for HTTP.

私はこの質問が以前に答えられたことを認識します、しかし私はまだ私の問題に対する解決策を見つけていません。プロンプトからchrome.exe --allow-file-access-from-filesを実行しようとし、ファイルをローカルファイルシステムに移動しましたが、それでも同じエラーが発生します。

私はどんな提案にも感謝します！

securitygoogle-chrome
109
xTMNTxRaphaelx

パソコンのコードエディタでHTMLやJavascriptを書いてブラウザで出力をテストするようなことをしていると、おそらくCross Origin Requestsに関するエラーメッセージが出るでしょう。あなたのブラウザはHTMLをレンダリングし、サーバをセットアップする必要なしにあなたのブラウザの中でJavascript、jQuery、angularJを実行するでしょう。しかし、多くのWebブラウザはクロスサイト攻撃を監視するようにプログラムされており、リクエストをブロックします。誰かがあなたのウェブブラウザからあなたのハードドライブを読めるようにしたくないでしょう。 Javascriptを実行するNotepad ++、およびjQueryやangularJなどのフレームワークを使用して、完全に機能するWebページを作成できます。 Notepad ++のメニュー項目RUN, LAUNCH IN FIREFOXを使用してすべてをテストします。これは、Webページの作成を開始するための素晴らしい、簡単な方法ですが、レイアウト、CSS、および単純なページナビゲーション以外のものを作成するときは、ローカルサーバーをマシン上に設定する必要があります。

これが私が使ういくつかのオプションです。

  1. FirefoxでWebページをローカルにテストしてから、ホストにデプロイします。
  2. または：ローカルサーバーを実行する

Firefoxでテストし、ホストにデプロイする

  1. Firefoxは現在ハードドライブから提供されたファイルからのクロスオリジンリクエストを許可しています
  2. あなたのWebホスティングサイトは、マニフェストファイルによって設定されたフォルダ内のファイルへのリクエストを許可します

ローカルサーバーを実行する

  • ApacheやPythonのように、あなたのコンピュータ上でサーバを動かしてください。
  • Pythonはサーバーではありませんが、単純なサーバーで動作します。

Pythonでローカルサーバーを実行する

あなたのIPアドレスを入手してください：

  • Windowsの場合：「コマンドプロンプト」を開きます。すべてのプログラム、アクセサリ、コマンドプロンプト
  • 私はいつもCommand PromptをAdministratorとして実行します。 Command Promptメニュー項目を右クリックしてRun As Administratorを探してください
  • コマンドipconfigを入力してEnterを押します。
  • IPv4アドレスを探します。 。 。 。 。 。 。 。 12.123.123.00
  • あなたのIPアドレスも表示するWebサイトがあります

Pythonを持っていないのなら、ダウンロードしてインストールしてください。

「コマンドプロンプト」を使用して、ファイルをWebページとして使用するフォルダに移動する必要があります。

  • C：\ Rootディレクトリに戻る必要がある場合は、cd /と入力します。
  • cd Drive：\ Folder\Folder\etcと入力して、.Htmlファイルがあるフォルダ（またはphpなど）に移動します。
  • パスを確認してください。コマンドプロンプトでpath：と入力します。あなたはpythonが置かれているフォルダへのパスを見なければなりません。たとえば、pythonがC：\ Python27にある場合は、リストされているパスにそのアドレスが表示されているはずです。
  • Pythonディレクトリへのパスがパスに含まれていない場合は、パスを設定する必要があります。 help pathと入力してEnterキーを押します。あなたは道の助けを見るでしょう。
  • 次のように入力します。path c：\ python27％path％
  • ％path％は現在のすべてのパスを保持します。現在のパスをすべて消去するのではなく、新しいパスを追加するだけです。
  • ファイルを提供するフォルダから新しいパスを作成します。
  • Pythonサーバーを起動します。次のように入力します。python -m SimpleHTTPServer portここで、 'port'は必要なポートの番号です。例えば、python -m SimpleHTTPServer 1337
  • ポートを空のままにすると、デフォルトのポート8000​​になります。
  • Pythonサーバーが正常に起動すると、msgが表示されます。

Webアプリケーションをローカルに実行する

  • ブラウザを開く
  • 住所の行にhttp://your IP address:portと入力します。
  • デフォルトはhttp://xxx.xxx.x.x:1337またはhttp://xx.xxx.xxx.xx:8000
  • サーバが動作している場合は、ブラウザにファイルのリストが表示されます。
  • 配信したいファイルをクリックすると表示されます。

より高度なソリューション

  • コードエディタ、Webサーバー、および統合されているその他のサービスをインストールします。

Apache、PHP、Python、SQL、デバッガなどをすべて別々にマシンにインストールしてから、それらをすべて一緒に機能させる方法を見つけ出すために多くの時間を費やすか、それらすべてを組み合わせたソリューションを探すことができます。

私はNetBeans IDEでXAMPPを使うのが好きです。 Apacheや他のサービスを管理し統合するためのUser Interfaceを提供するWAMPをインストールすることもできます。

153
Alan Wells

単純解

純粋なhtml/js/cssファイルで作業しているなら。

クロムでこの小型サーバー（ リンク ）アプリをインストールしてください。アプリを開き、ファイルの場所をプロジェクトディレクトリに指定します。

アプリに表示されているURLに移動します。

編集：Gulpを使ったよりスマートなソリューション

ステップ1：Gulpをインストールする。端末で次のコマンドを実行してください。

npm install gulp-cli -g
npm install gulp -D

ステップ2：プロジェクトディレクトリ内にgulpfile.jsという名前のファイルを作成します。以下の内容をその中にコピーしてください。

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

ステップ3：ブラウザ同期gulpプラグインをインストールします。 gulpfile.jsが存在するのと同じディレクトリ内で、次のコマンドを実行します。

npm install browser-sync gulp --save-dev

手順4：サーバーを起動します。 gulpfile.jsが存在するのと同じディレクトリ内で、次のコマンドを実行します。

gulp serve
89
Sushant Kr

ブラウザから直接HTMLドキュメントを開いているだけなので、このエラーが発生しています。これを修正するには、Webサーバーからコードを提供し、localhostでアクセスする必要があります。 Apacheが設定されている場合は、それを使ってファイルを提供してください。 JetBrains IDE、Eclipseなど、一部のIDEはWebサーバーを内蔵しています。

Node.Jsを設定している場合は、 http-server を使用できます。 npm install http-server -gを実行するだけで、http-server C:\location\to\app.のように端末で使用できるようになります。Kirill Fuchs

2
MEAbid

私は自分のWeb APIプロジェクトをローカルにデプロイしているときにこのエラーに直面していました。そして、下記のURLでのみAPIプロジェクトを呼び出していました。

localhost // myAPIProject

エラーメッセージに「http：//ではない」と表示されているので、URLを変更して次のようにhttpという接頭辞を付け、エラーはなくなりました。

http：// localhost // myAPIProject

1
Usman

ニーズによりますが、JSONを http://myjson.com に保存して一時的に（ダミーの）JSONをチェックする簡単な方法もあります。 。 APIリンクをコピーして、JavaScriptコードに貼り付けます。ビオラ！コードを配置したいときは、コード内のそのURLを変更することを忘れないでください。

0
user5613899

WebStorm Javascript IDE を使用している場合は、ブラウザでWebStormからプロジェクトを開くことができます。 WebStormは自動的にサーバーを起動し、これらのエラーは発生しなくなります。これは、許可/サポートされているプロトコル（HTTP）でファイルにアクセスしているためです。

0
mathew11

に追加するには、ここにAlan Wells の巧妙な答えがあります。

ローカルサーバーを実行する

あなたは Serve であなたのコンピュータの any フォルダに仕えることができます。

まず、コマンドラインを使用して配信したいフォルダに移動します。

それから

npx i -g serve
serve

またはダウンロードしてServeをテストしたい場合

npx serve

以上です！あなたのファイルは http：// localhost：5000 で見ることができます。

enter image description here

0
Bar Horing