Javascript AngularJS 错误：仅协议方案支持跨源请求：http、data、chrome-extension、https
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27742070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
提问by user3422637
I have three files of a very simple angular js application
我有一个非常简单的 angular js 应用程序的三个文件
index.html
索引.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
产品-color.html
<div class="list-group-item">
<h3>Hello <em class="pull-right">Brother</em></h3>
</div>
app.js
应用程序.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"
}
];
})();
I started getting this error as soon as I entered an include of product-color.html using custom directive named productColor:
一旦我使用名为 productColor 的自定义指令输入 product-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'.
What may be going wrong? Is it a path issue for product-color.html?
可能出什么问题了？这是 product-color.html 的路径问题吗？
All my three files are in the same root folder C:/user/project/
我所有的三个文件都在同一个根文件夹中 C:/user/project/
回答by Kirill Fuchs
This error is happening because you are just opening html documents directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Apache setup, use it to serve your files. Some IDE's have built in web servers, like JetBrains IDE's, Eclipse...
发生此错误是因为您只是直接从浏览器打开 html 文档。要解决此问题，您需要从网络服务器提供代码并在本地主机上访问它。如果您有 Apache 设置，请使用它来提供您的文件。一些 IDE 内置了 Web 服务器，例如 JetBrains IDE、Eclipse...
If you have Node.Js setup then you can use http-server. Just run npm install http-server -gand you will be able to use it in terminal like http-server C:\location\to\app.
如果您有 Node.Js 设置，那么您可以使用http-server。只需运行npm install http-server -g，您就可以在像http-server C:\location\to\app.
回答by Chirag
VERY SIMPLE FIX
非常简单的修复
- Go to your app directory
- Start SimpleHTTPServer
- 转到您的应用程序目录
- 启动 SimpleHTTPServer
In the terminal
在终端
$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer
Now, go to localhost:8000 in your browser and the page will show
现在，在浏览器中访问 localhost:8000，页面将显示
回答by daniel
The operation is not allowed in chrome. You can either use a HTTP server(Tomcat) or you use Firefox instead.
在 chrome 中不允许该操作。您可以使用 HTTP 服务器 (Tomcat) 或使用 Firefox。
回答by Ali Sepehri.Kh
My problem was resolved just by adding http://to my url address.
for example I used http://localhost:3000/moviesinstead of localhost:3000/movies.
我的问题只是通过添加http://到我的 url 地址来解决。例如我用http://localhost:3000/movies而不是localhost:3000/movies.
回答by Tejus Prasad
If you are using this in chrome/chromium browser(ex: in Ubuntu 14.04), You can use one of the below command to tackle this issue.
如果您在 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
This will allow you to load the file in chrome or chromium. If you have to do the same operation for windows you can add this switch in properties of the chrome shortcut or run it from cmdwith the flag. This operation is not allowed in Chrome, Opera, Internet Explorer by default. By default it works only in firefox and safari. Hence using this command will help you.
这将允许您以铬或铬加载文件。如果您必须对 Windows 执行相同的操作，您可以在 chrome 快捷方式的属性中添加此开关或cmd使用标志运行它。Chrome、Opera、Internet Explorer 默认不允许此操作。默认情况下，它仅适用于 Firefox 和 safari。因此，使用此命令将对您有所帮助。
Alternately you can also host it on any web server (Example:Tomcat-java,NodeJS-JS,Tornado-Python, etc) based on what language you are comfortable with. This will work from any browser.
或者，您也可以根据您熟悉的语言将其托管在任何 Web 服务器（例如：Tomcat-java、NodeJS-JS、Tornado-Python 等）上。这将适用于任何浏览器。
回答by link64
If for whatever reason you cannothave the files hosted from a webserver and still need some sort of way of loading partials, you can resort to using the ngTemplatedirective.
如果由于某种原因您无法从网络服务器托管文件，并且仍然需要某种加载部分的方式，您可以使用该ngTemplate指令。
This way, you can include your markup inside script tags in your index.html file and not have to include the markup as part of the actual directive.
这样，您可以在 index.html 文件中的脚本标签内包含标记，而不必将标记作为实际指令的一部分包含在内。
Add this to your 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>
Then, in your directive:
然后，在您的指令中：
app.directive('productColor', function() {
return {
restrict: 'E', //Element Directive
//template: 'tpl-productColour'
templateUrl: 'tpl-productColour'
};
}
);
回答by Timothy.Li
RootCause:
根本原因：
File protocol does not support cross origin request for Chrome
文件协议不支持 Chrome 的跨域请求
Solution 1:
解决方案1：
use http protocol instead of file, meaning: set up a http server, such as apache, or nodejs+http-server
使用http协议代替file，意思是：搭建一个http服务器，比如apache，或者nodejs+http-server
Sotution 2:
方案2：
Add --allow-file-access-from-filesafter Chrome`s shortcut target, and open new browse instance using this shortcut
在 Chrome 的快捷方式目标后添加--allow-file-access-from-files，并使用此快捷方式打开新的浏览实例
Solution 3:
解决方案3：
use Firefox instead
改用 Firefox
回答by Michael Horta Fleitas
- Install the http-server, running command
npm install http-server -g - Open the terminal in the path where is located the index.html
- Run command
http-server . -o - Enjoy it!
- 安装http-server，运行命令
npm install http-server -g - 在 index.html 所在的路径中打开终端
- 运行命令
http-server . -o - 好好享受！
回答by bullettrain
I would add that one can also use xampp, mamp type of things and put your project in the htdocs folder so it is accessible on localhost
我想补充一点，也可以使用 xampp、mamp 类型的东西，并将您的项目放在 htdocs 文件夹中，以便可以在本地主机上访问
回答by Edison D'souza
If you are running server already, don't forget to use http://in the API call. This might cause a serious trouble.
如果您已经在运行服务器，请不要忘记在 API 调用中使用http://。这可能会导致严重的麻烦。
