BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。

2022-07-04 22:07:30

質問

私は非常に単純なangular 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>

製品カラー.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/

どのように解決するには？

このエラーは、ブラウザから直接 html ドキュメントを開いているために発生しています。これを解決するには、Web サーバーからコードを提供し、localhost でアクセスする必要があります。Apache がセットアップされている場合、それを使用してファイルを提供します。IDE の中には JetBrains IDE や Eclipse などのように Web サーバーが組み込まれているものがあります。

Node.Jsをセットアップしている場合、次のように使用できます。 http-server . を実行するだけです。 npm install http-server -g を実行すれば、ターミナルで次のように使えるようになります。 http-server C:\location\to\app .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します