AngularJS错误:只支持协议方案的跨源请求:http、data、

AngularJS错误:只支持协议方案的跨源请求:http、data、chrom-扩展名、https。

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

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-chro.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'.

可能出什么问题了?这是产品的路径问题吗?

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


胡子哥哥
浏览 792回答 3
3回答

精慕HU

发生此错误是因为您只是直接从浏览器打开html文档。要解决这个问题,您需要从Web服务器提供代码并在本地主机上访问它。如果您有Apache安装程序,请使用它来服务您的文件。有些IDE内置了Web服务器,比如JetBrainsIDE,Eclipse.如果安装了Node.js,那么可以使用http-服务器..快跑npm install http-server -g您将能够在终端中使用它,就像http-server C:\location\to\app.

慕桂英3389331

非常简单的修正转到应用程序目录启动SimpleHTTPServer在终点站$&nbsp;cd&nbsp;yourAngularApp~/yourAngularApp&nbsp;$&nbsp;python&nbsp;-m&nbsp;SimpleHTTPServer现在,在浏览器中转到localhost:8000,页面将显示

斯蒂芬大帝

如果您在Chrome/Cr浏览器(例如:在Ubuntu14.04中)中使用此功能,则可以使用以下命令之一来解决此问题。ThinkPad-T430:~$&nbsp;google-chrome&nbsp;--allow-file-access-from-filesThinkPad-T430:~$&nbsp;google-chrome&nbsp;--allow-file-access-from-files&nbsp;fileName.htmlThinkPad-T430:~$&nbsp;chromium-browser&nbsp;--allow-file-access-from-filesThinkPad-T430:~$&nbsp;chromium-browser&nbsp;--allow-file-access-from-files&nbsp;fileName.html这将允许您加载铬或铬文件。如果必须对windows执行相同的操作,则可以在chrom快捷方式的属性中添加此开关或从cmd带着旗子。默认情况下,Chrome、Opera、InternetExplorer不允许进行此操作。默认情况下,它只在Firefox和Safari中工作。因此,使用此命令将对您有所帮助。或者,您也可以根据您熟悉的语言在任何Web服务器(例如:tomcat-java、NodeJS-JS、旋风-Python等)上托管它。这将适用于任何浏览器。
打开App,查看更多内容
随时随地看视频慕课网APP