为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

当年话下 2019-07-26 13:13:49
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
查看完整描述

3 回答

?
德玛西亚99

TA贡献1770条经验 获得超3个赞

发生此错误是因为您只是直接从浏览器打开html文档。要解决这个问题,您需要从Web服务器提供代码并在本地主机上访问它。如果您有Apache安装程序,请使用它来服务您的文件。有些IDE内置了Web服务器,比如JetBrainsIDE,Eclipse.

如果安装了Node.js,那么可以使用http-服务器..快跑npm install http-server -g您将能够在终端中使用它,就像http-server C:\location\to\app.


查看完整回答
反对 回复 2019-07-27
?
拉风的咖菲猫

TA贡献1995条经验 获得超2个赞

非常简单的修正

  1. 转到应用程序目录
  2. 启动SimpleHTTPServer


在终点站

$ cd yourAngularApp~/yourAngularApp $ python -m SimpleHTTPServer

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




查看完整回答
反对 回复 2019-07-27
?
繁花如伊

TA贡献2012条经验 获得超12个赞


如果您在Chrome/Cr浏览器(例如:在Ubuntu14.04中)中使用此功能,则可以使用以下命令之一来解决此问题。

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

这将允许您加载铬或铬文件。如果必须对windows执行相同的操作,则可以在chrom快捷方式的属性中添加此开关或从cmd带着旗子。默认情况下,Chrome、Opera、InternetExplorer不允许进行此操作。默认情况下,它只在Firefox和Safari中工作。因此,使用此命令将对您有所帮助。

或者,您也可以根据您熟悉的语言在任何Web服务器(例如:tomcat-java、NodeJS-JS、旋风-Python等)上托管它。这将适用于任何浏览器。




查看完整回答
反对 回复 2019-07-27
  • 3 回答
  • 0 关注
  • 604 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信