AngularJS 错误:仅协议方案支持跨域请求:http、data、chrome-extension、https

2022-08-30 04:30:59

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

索引.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>

应用程序.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"
              }
  ];

})();

一旦我输入产品颜色包含,我就开始收到此错误.html使用名为 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'.

可能出了什么问题?这是产品颜色.html路径问题吗?

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


答案 1

发生此错误是因为您只是直接从浏览器打开html文档。要解决此问题,您需要从Web服务器提供代码并在localhost上访问它。如果您设置了Apache,请使用它来提供文件。一些IDE已经内置了Web服务器,如JetBrains IDE,Eclipse...

如果你有Node.Js设置,那么你可以使用http-server。只需运行,您就可以在终端中使用它,例如.npm install http-server -ghttp-server C:\location\to\app


答案 2

非常简单的修复

  1. 转到应用目录
  2. 启动简单HTTP服务器


在终端中

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

现在,在浏览器中转到localhost:8000,页面将显示