无法使用 $http 读取 json 文件

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

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

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

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

$ 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

这与您在没有服务器的情况下在本地加载文件的事实有关。人们为 chrome 提出了一种解决方法。如果您使用的是 Firefox，请将 flagsecurity.fileuri.strict_origin_policy 设置为 false。

Answer 3

问题是您在 file:/// 协议上运行文件，这是 ex10.html 的情况，您通过双击加载它:)，您必须以 apache 身份通过网络服务器以查看您在 http:// 协议上的文件，然后您的文件将被加载。

Answer 4

出于安全原因，无法通过 ajax 读取本地文件。您可以通过本地服务器提供文件并从 localhost 加载它以规避此问题。

查看 node.js 中的 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") 应该可以在您的应用内部工作。