web-dev-qa-db-ja.com

AngularJSエラー：クロスオリジンリクエストはプロトコルスキームでのみサポートされています：http、data、chrome-extension、https

私は非常に単純な角度jsアプリケーションの3つのファイルを持っています

index.html 

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="StoreController as store">
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
      </div>

  <product-color></product-color>
  </body>
</html>

product-color.html 

<div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>

app.js 

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function($http){
              this.products = gem;
          }
  );

  app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          templateUrl: 'product-color.html'
      };
   }
  );

  var gem = [
              {
                  name: "Shirt",
                  price: 23.11,
                  color: "Blue"
              },
              {
                  name: "Jeans",
                  price: 5.09,
                  color: "Red"
              }
  ];

})();

ProductColorというカスタムディレクティブを使用してproduct-color.htmlのインクルードを入力するとすぐにこのエラーが発生し始めました。

XMLHttpRequest cannot load file:///C:/product-color.html. Cross Origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.

何が悪いのでしょうか。それはproduct-color.htmlのパスの問題ですか？

私の3つのファイルはすべて同じルートフォルダC:/user/project/にあります。

javascripthtmlangularjsxmlhttprequest
124
user3422637

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

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

295
Kirill Fuchs

非常に単純な修正

  1. アプリディレクトリに移動します
  2. SimpleHTTPServerを起動します。


ターミナル内

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

ブラウザでlocalhost：8000にアクセスしてください。ページが表示されます。

48
Chirag

この操作はクロムでは許可されていません。 HTTPサーバー（Tomcat）を使うことも、Firefoxを使うこともできます。

41
daniel

私の問題は私のURLアドレスにhttp://を追加するだけで解決しました。たとえば、http://localhost:3000/moviesの代わりにlocalhost:3000/moviesを使用しました。

31
Ali Sepehri.Kh

あなたがクロム/クロムブラウザ（例えば：Ubuntu 14.04）でこれを使用しているなら、あなたはこの問題に取り組むために下記のコマンドの1つを使うことができます。

ThinkPad-T430:~$ google-chrome --allow-file-access-from-files
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html

ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html

これにより、ファイルをクロムまたはクロムで読み込むことができます。ウィンドウに対して同じ操作をしなければならない場合は、このショートカットをクロムショートカットのプロパティに追加するか、cmdからフラグを付けて実行することができます。この操作は、Chrome、Opera、Internet Explorerではデフォルトでは許可されていません。デフォルトではFirefoxとSafariでのみ動作します。したがって、このコマンドを使用すると役立ちます。

あるいは、どの言語に慣れているかに基づいて、任意のWebサーバー（例：Tomcat-Java、NodeJS-JS、Tornado-Pythonなど）でホストすることもできます。これはどのブラウザからでも動作します。

12
Tejus Prasad

何らかの理由であなたが できない ファイルをWebサーバからホストしていて、それでもパーシャルをロードするためのある種の方法が必要な場合は、ngTemplateディレクティブを使うことに頼ることができます。

こうすると、index.htmlファイルのスクリプトタグ内にマークアップを含めることができ、実際のディレクティブの一部としてマークアップを含める必要がなくなります。

これをあなたのindex.htmlに追加してください

<script type='text/ng-template' id='tpl-productColour'>
 <div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>

それから、あなたの指令で：

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );
11
link64

RootCause：

ファイルプロトコルはChromeのクロスオリジンリクエストをサポートしていません

解決策1：

fileの代わりにhttpプロトコルを使用します。つまり、Apacheなどのhttpサーバーをセットアップするか、nodejs + http-serverとします。

計算2：

Chromeのショートカットターゲットの後に - --low-file-from-files を追加し、このショートカットを使用して新しいブラウズインスタンスを開きます。

enter image description here

解決策3：

代わりにFirefoxを使用してください

5
Timothy.Li

ローカルホストからアクセスできるように、xampp、mampタイプのものを使用してプロジェクトをhtdocsフォルダーに配置できることを追加します。

3
bullettrain
  1. コマンドnpm install http-server -gを実行して、http-serverをインストールします。
  2. Index.htmlがある場所のパスで端末を開きます。
  3. 実行コマンドhttp-server . -o
  4. 楽しめ！
2
Michael Horta Fleitas

すでにサーバーを実行している場合は、API呼び出しで http：// を使用することを忘れないでください。これは重大な問題を引き起こす可能性があります。

2
Edison D'souza

その理由

あなたは、Apacheのようなサーバを通してページを開いていないので、ブラウザがリソースを取得しようとするとき、それはそれが別のドメインからのものであると考えます、それは許されません。いくつかのブラウザはそれを可能にしますが。

解決策

Inetmgrを実行してページをローカルでホストし、 http：// localhost：portnumber/PageName.html として、またはApache、nginx、nodeなどのWebサーバーを参照してください。

別のブラウザを使用するFirefoxおよびSafariを使用してページを直接開いてもエラーが表示されませんでした。 ChromeとIE（xx）にのみ付属しています。

角かっこ、Sublime、Notepad ++などのコードエディタを使用している場合、これらのアプリケーションはこのエラーを自動的に処理します。

1
Virendra Shenvi Velingkar

クロムの拡張子200okそのクロムを追加し、あなたのフォルダを選択するためのWebサーバーがあります

1
gaurav moolani

この問題はFirefoxとSafariでは発生していません。最新バージョンのxml2json.jsを使用していることを確認してください。私はIEでXMLパーサーエラーに直面したので。 Chromeでは、ApacheやXAMPPのようなサーバーで開くのが一番です。

1
Shantha Moorthy K

C：/user/project/index.htmlに移動し、Visual Studio 2017でファイル、ブラウザーで表示、またはCtrl + Shift + Wを押します

0
etoricky

@Kirill Fuchsの優れた解決策に追加し、@ StackUserの疑問に答える - httpサーバーを起動しながら、htmlページまでではなく、アプリフォルダーのみにパスを設定します。 http-server C:\location\to\appおよびappフォルダーの下のindex.htmlにアクセス

0
Teejay

次のフラグを使用してchromeを開く必要があります。メニューを実行して「chrome --disable-web-security --user-data-dir」と入力します。

フラグを使用してchromeを開く前に、chromeのすべてのインスタンスが閉じていることを確認してください。 CORSが有効になっていることを示すセキュリティ警告が表示されます。

0
Manas