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コマンドプロンプトから実行しようとし、ファイルをローカルファイルシステムに移動しましたが、それでも同じエラーが発生します。

私は提案を感謝します！

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

ここに私が使用するいくつかのオプションがあります。

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

Firefoxでのテスト、ホストへのデプロイ

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

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

• ApacheやPythonなどのコンピューターでサーバーを実行する
• Pythonはサーバーではありませんが、シンプルなサーバーを実行します

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

IPアドレスを取得します。

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

Pythonがない場合は、ダウンロードしてインストールしてください。

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

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

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

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

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

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

Apache、PHP、Python、SQL、デバッガなどをすべて個別にマシンにインストールし、それらをすべて連携させる方法を理解するために多くの時間を費やしたり、それらすべてを組み合わせたソリューションを探したりすることができます。

XAMPPをNetBeans IDEで使用するのが好きです。User InterfaceApacheおよびその他のサービスを管理および統合するためのWAMPをインストールすることもできます。

シンプルなソリューション

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

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

アプリに表示されている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

このエラーは、ブラウザから直接htmlドキュメントを開いているために発生しています。これを修正するには、ウェブサーバーからコードを提供し、ローカルホストでアクセスする必要があります。Apacheを設定している場合は、それを使用してファイルを提供します。JetBrains IDE、Eclipseなどの一部のIDEにはWebサーバーが組み込まれています...

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

アラン・ウェルズの精巧な答えにここに追加するには、ここで簡単に修正できます

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

Serveを使用して、コンピューター内の任意のフォルダーを提供できます

まず、コマンドラインを使用して、提供するフォルダーに移動します。

その後

npx i -g serve
serve

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

npx serve

以上です！ファイルはhttp：// localhost：5000で表示できます

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

localhost // myAPIProject

エラーメッセージでhttp：//ではないことが示されているため、以下のようにURLを変更してプレフィックスhttpを付けたところ、エラーは発生しなくなりました。

http：// localhost // myAPIProject

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

必要に応じて異なりますが、JSONをhttp://myjson.comに保存して、（ダミーの）JSONを一時的に確認する簡単な方法もあります。APIリンクをコピーして、JavaScriptコードに貼り付けます。ビオラ！コードをデプロイする場合は、コード内のURLを変更することを忘れないでください。

プロジェクトフォルダーをXamppディレクトリのhtdocsに配置しますxamppコントロールパネルを使用してApacheサーバーを起動し、ブラウザーを開いてlocalhost / projectfolderに移動すると、動作します