Question

使用$ 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

Answer 1

您最好启动一个简单的Web服务器来提供文件。 E.g。

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

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

或者，您可以在Chrome中设置–allow-file-access-from-files标记：How to set the Google Chrome --allow-file-access-from-files flag

Answer 2

出于安全原因，无法通过ajax读取本地文件。您可以通过本地服务器提供文件，并从localhost加载它以避免这种情况。

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

完成所有这些后，$http.get("http://localhost:1234/countries.json")应该在您的应用内部工作。

Answer 3

这与您在没有服务器的情况下在本地加载文件这一事实有关。人们建议使用chrome的解决方法。如果您正在使用Firefox，请将标记security.fileuri.strict_origin_policy设置为false。

Answer 4

问题是您在 file：/// 协议上运行文件，这是ex10.html通过双击加载它的情况:)，你＆＃ 39;要通过网络服务器作为apache通过 http：// 协议查看您的文件，然后将加载您的文件。

无法使用$ http读取json文件

4 个答案: