Javascript 无法使用$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

尝试创建一个简单的节点服务器：

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

---

出于安全原因，不可能通过ajax读取本地文件。您可以通过本地服务器提供该文件，并从本地主机加载该文件以避免这种情况

从节点查看http服务器模块。您可以使用

npm install--global http server

安装它，然后在

.json

文件所在的文件夹中打开控制台。然后运行

http服务器-p 1234--cors

，您的

.json

文件应该可以从

localhost:1234/countries.json

中的浏览器访问（编辑：我假设您已经安装了节点。如果没有，请先安装节点）

---

在所有这些之后，执行

$http.get（“http://localhost:1234/countries.json“

应该在应用程序内部工作。

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

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

并打开

http://127.0.0.1:8000

在浏览器中

---

或者，您可以在Chrome:

中设置

–允许从文件访问文件
标志，这与您在本地加载文件而不使用服务器有关。人们建议为chrome提供一个解决方案。如果使用Firefox，请将标志
security.fileuri.strict\u origin\u policy
设置为
false
，问题是您在文件：//协议上运行文件，这是ex10.html的情况，双击即可加载：），您必须以apache身份通过web服务器才能在http://协议上查看您的文件，然后将加载您的文件。
http服务器仅在端口8080上运行，而不管您为其指定的端口是什么。@user2309862您是对的，我的参数错误。它的-p不是--port。看看现在能不能用