[英]Cannot read json file using $http
Using $http to read json from a file: 使用$ http从文件读取json:
(function(){
var countryApp=angular.module("countryApp",[]);
countryApp.controller("CountryCtrl",function($scope,$http){
$http.get('countries.json').success(function(data){
$scope.countries=data;
});
});
return countryApp;
})();
The file is in the same folder as the html file,it looks like this: 该文件与html文件位于同一文件夹中,如下所示:
[
{
"name": "China",
"population": 135982100
},
{
"name": "India",
"population": 1205625000
},
{
"name": "United States of America",
"population": 312247000
}
]
This is the error: 这是错误:
XMLHttpRequest cannot load file:///home/anr/angular_examples/countries.json. Cross origin requests are only supported for HTTP. ex10.html:1
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/anr/angular_examples/countries.json'.
at Error (native)
at file:///home/anr/angular_examples/js/angular.js:8380:11
at sendReq (file:///home/anr/angular_examples/js/angular.js:8180:9)
at $http.serverRequest (file:///home/anr/angular_examples/js/angular.js:7921:16)
at wrappedCallback (file:///home/anr/angular_examples/js/angular.js:11319:81)
at wrappedCallback (file:///home/anr/angular_examples/js/angular.js:11319:81)
at file:///home/anr/angular_examples/js/angular.js:11405:26
at Scope.$eval (file:///home/anr/angular_examples/js/angular.js:12412:28)
at Scope.$digest (file:///home/anr/angular_examples/js/angular.js:12224:31)
at Scope.$apply (file:///home/anr/angular_examples/js/angular.js:12516:24) angular.js:9778
Tried to create a simple Node server: 试图创建一个简单的节点服务器:
var express=require('express');
var app=express();
app.use(express.static('../'));
app.listen(3000);
Still getting this error: 仍然出现此错误:
XHR finished loading: GET "http://localhost:3000/countries.json". angular.js:8380
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: country in countries, Duplicate key: string:"
http://errors.angularjs.org/1.2.16/ngRepeat/dupes? p0=country%20in%20countries&p1=string%3A%22
at http://localhost:3000/js/angular.js:78:12
at ngRepeatAction (http://localhost:3000/js/angular.js:20025:20)
at Object.$watchCollectionAction [as fn] (http://localhost:3000/js/angular.js:12128:13)
at Scope.$get.Scope.$digest (http://localhost:3000/js/angular.js:12251:29)
at Scope.$get.Scope.$apply (http://localhost:3000/js/angular.js:12516:24)
at done (http://localhost:3000/js/angular.js:8204:45)
at completeRequest (http://localhost:3000/js/angular.js:8412:7)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/js/angular.js:8351:11) angular.js:9778
You'd better start a simple web server to serve your files. 您最好启动一个简单的Web服务器来提供文件。 Eg
例如
$ cd /home/anr/angular_examples
$ python -m SimpleHTTPServer
And open http://127.0.0.1:8000
in your browser. 并在浏览器中打开
http://127.0.0.1:8000
。
Alternatively, you can set the –allow-file-access-from-files
flag in Chrome: How to set the Google Chrome --allow-file-access-from-files flag 另外,您可以在Chrome中设置
–allow-file-access-from-files
标志: 如何设置Google Chrome浏览器的--allow-file-access-from-files标志
It is not possible to read a local file through ajax for security reasons. 出于安全原因,无法通过ajax读取本地文件。 You could serve the file through a local server and load it from localhost to circumvent this.
您可以通过本地服务器提供文件,然后从本地主机加载该文件以规避此问题。
Have a look at the http-server module from node. 看一下节点中的http服务器模块。 You can install it using
npm install --global http-server
and then open a console in the folder where the .json
file is located. 您可以通过安装它
npm install --global http-server
,然后在该文件夹中打开控制台.json
文件的位置。 Then run http-server -p 1234 --cors
and your .json
file should be accessible from a browser in localhost:1234/countries.json
(EDIT: I'm assuming you have node installed. If not, install node first) 然后运行
http-server -p 1234 --cors
和你.json
文件应该是在浏览器中访问localhost:1234/countries.json
(编辑:我假设你已经安装节点如果没有,第一次安装节点)
After all this, doing $http.get("http://localhost:1234/countries.json")
should work from inside your app. 完成所有这些之后,应该在您的应用程序内部执行
$http.get("http://localhost:1234/countries.json")
。
This has to do with the fact that you load the files locally without a server. 这与以下事实有关:您无需服务器即可在本地加载文件。 People suggested a workaround for chrome.
人们提出了针对chrome的解决方法。 If you're using Firefox set the flag
security.fileuri.strict_origin_policy
to false
. 如果您使用的是Firefox,则将标志
security.fileuri.strict_origin_policy
设置为false
。
问题是您正在使用file:///协议运行文件,在ex10.html的情况下,您是通过双击:)来加载它的,您必须通过Web服务器作为apache来查看您的文件http://协议上的文件,则将加载您的文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.