无法使用$ http读取json文件

使用$ 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; })(); 

该文件与html文件位于同一文件夹中，如下所示：

  [ { "name": "China", "population": 135982100 }, { "name": "India", "population": 1205625000 }, { "name": "United States of America", "population": 312247000 } ] 

这是错误的：

  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 

试图创build一个简单的节点服务器：

 var express=require('express'); var app=express(); app.use(express.static('../')); app.listen(3000); 

仍然得到这个错误：

  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 

Answer 1

你最好启动一个简单的Web服务器来提供你的文件。 例如

 $ cd /home/anr/angular_examples $ python -m SimpleHTTPServer 

并在浏览器中打开http://127.0.0.1:8000 。

或者，您可以在Chrome中设置–allow-file-access-from-files标志： 如何设置Google Chrome – 允许文件访问从文件标志

Answer 2

这与您无需服务器本地加载文件有关。 人们提出了一个铬的解决方法。 如果您使用Firefox，则将标记security.fileuri.strict_origin_policy设置为false 。

Answer 3

问题是，你正在运行你的文件在文件：/ /协议，这是ex10.html的情况下通过双击:)加载它，你必须通过一个Web服务器作为Apache通过看到你的http：//协议上的文件，那么你的文件将被加载。

Answer 4

出于安全原因，不可能通过ajax读取本地文件。 您可以通过本地服务器提供文件，并从本地加载它来绕过这个问题。

看看来自节点的http-server模块。 您可以使用npm install --global http-server进行npm install --global http-server ，然后在npm install --global http-server文件所在的文件夹中打开一个控制台。 然后运行http-server -p 1234 --cors ，你的http-server -p 1234 --cors文件应该可以从localhost:1234/countries.json的浏览器访问（编辑：我假设你已经安装了节点，如果没有，先安装节点）

毕竟，做$http.get("http://localhost:1234/countries.json")应该在你的应用程序内工作。