AngularJS错误:交叉原点请求仅支持协议scheme:http,data,chrome-extension,https

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

的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> 

产品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的自定义指令inputproduct-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的path问题?

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

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

如果你有Node.Js设置,那么你可以使用http-server 。 只要运行npm install http-server -g ,你就可以在terminal上使用它,例如http-server C:\location\to\app

非常简单的修复

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

在terminal

 $ cd yourAngularApp ~/yourAngularApp $ python -m SimpleHTTPServer 

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

这个操作在chrome中是不允许的。 您可以使用HTTP服务器(Tomcat),也可以使用Firefox。

我的问题是通过添加http://到我的url地址解决的。 例如我使用http://localhost:3000/movies而不是localhost:3000/movies

如果你在chrome / chromium浏览器(例如Ubuntu 14.04)中使用它,你可以使用下面的命令来解决这个问题。

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

这将允许您加载文件在铬或铬。 如果您必须对Windows执行相同的操作,则可以在Chrome快捷方式的属性中添加此开关,或者使用标志从cmd运行该开关。 Chrome,Opera,Internet Explorer默认情况下不允许此操作。 默认情况下,它只适用于Firefox和Safari浏览器。 因此使用这个命令会帮助你。

或者,你也可以在任何Web服务器(例如Tomcat-java,NodeJS-JS,Tornado-Python等)上托pipe它,这取决于你使用哪种语言。 这将从任何浏览器工作。

如果由于某种原因,你不能从Web服务器托pipe文件,仍然需要某种加载部分的方式,你可以使用ngTemplate指令。

这样,您可以在index.html文件的脚本标记中包含标记,而不必将标记包含在实际指令中。

将此添加到您的index.html

 <script type='text/ng-template' id='tpl-productColour'> <div class="list-group-item"> <h3>Hello <em class="pull-right">Brother</em></h3> </div> </script> 

那么,在你的指令中:

 app.directive('productColor', function() { return { restrict: 'E', //Element Directive //template: 'tpl-productColour' templateUrl: 'tpl-productColour' }; } ); 

我想补充一点,也可以使用xampp,mamptypes的东西,并把你的项目放在htdocs文件夹中,这样可以在localhost上访问

根本原因:

文件协议不支持Chrome的跨源请求

解决scheme1:

使用http协议而不是文件,意思是:build立一个http服务器,比如apache,或者nodejs + http-server

parsing2:

在Chrome的快捷方式目标之后添加– 允许文件访问 –使用此快捷方式打开新的浏览实例

在这里输入图像描述

解决scheme3:

使用Firefox来代替

原因

你不是通过像Apache这样的服务器打开页面,所以当浏览器试图获取它认为来自不同域的资源时,这是不允许的。 虽然有些浏览器确实允许。

解决scheme

运行inetmgr并在本地托pipe你的页面,浏览为http:// localhost:portnumber / PageName.html,或者通过Apache,nginx,node等web服务器。

或者使用不同的浏览器使用Firefox和Safari直接打开页面时不显示错误。 它只适用于Chrome和IE(xx)。

如果您使用的是像Brackets,Sublime或Notepad ++这样的代码编辑器,这些应用程序会自动处理这个错误。

这个问题在Firefox和Safari中不会发生。 确保您使用的是最新版本的xml2json.js。 因为我遇到了IE中的XMLparsing器错误。 在Chrome最好的方式,你应该像在Apache或XAMPP服务器中打开它。

有一个铬扩展200ok其网页服务器铬只是添加,并select您的文件夹

如果您已经在运行服务器,请不要忘记在API调用中使用http:// 。 这可能会导致严重的麻烦。

你必须使用下面的标志打开chrome进入运行菜单并input“chrome –disable-web-security –user-data-dir”

在使用该标志打开chrome之前,请确保所有的chrome实例都已closures。 您将收到一条安全警告,指示CORS已启用。

添加到@Kirill Fuchs优秀的解决scheme,并回答@ StackUser的疑问 – 启动http服务器,设置path,直到只有应用程序文件夹,直到html页! http-server C:\location\to\app并访问app文件夹下的index.html