AngularJS 错误:跨源请求仅支持协议方案:http、data、chrome-extension、https-前端问题

AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https(AngularJS 错误:跨源请求仅支持协议方案:http、data、chrome-extension、https)

本文介绍了AngularJS 错误:跨源请求仅支持协议方案:http、data、chrome-extension、https的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常简单的 Angular js 应用程序的三个文件

I have three files of a very simple angular js application

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 的包含时，我就开始收到此错误:

I started getting this error as soon as I entered an include of product-color.html using custom directive named productColor:

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 的路径问题?

What may be going wrong? Is it a path issue for product-color.html?

我的三个文件都在同一个根文件夹C:/user/project/

All my three files are in the same root folder C:/user/project/