无法使用 Angular 向本地 JSON 文件发出 $http.get 请求答案

【问题标题】：Unable to make a $http.get request to a local JSON file using Angular无法使用 Angular 向本地 JSON 文件发出 $http.get 请求
【发布时间】：2015-01-22 12:17:15
【问题描述】：

我正在制作一个天气应用程序，我需要从控制器中获取本地 JSON 文件，然后对数据进行处理。但是，由于某种原因，我无法获得 local $http.get 请求。我该怎么办？

这是我当前的代码：

var weatherApp = angular.module('weatherApp', []); 

weatherApp.controller('weatherCtrl', function ($scope, $http) {
    $scope.cities = [],
    $scope.getCities = (function() {
        $http.get('http://localhost:81/Webb/angular projekt/jsons/cities.json')
             .success(function(data, status, headers, config) {

                 console.log(data);
             })
             .error(function(data, status, headers, config) {
                 console.log(status);
             });
    }())
}

这给了我这个错误：

SyntaxError: Unexpected token {                                         angular.js:11598
at Object.parse (native)
at oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:14:156)
at Yb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:77:190)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:50
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:7:302)
at Yc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:32)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:79:165)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:112:343
at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:126:193)
at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:123:286)

我也尝试过使用jsons/cities.json，但这会引发此错误：

Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

向外部资源发出 get 请求可以正常工作，但每当我在本地执行此操作时，似乎都无法正常工作。

我尝试获取的 JSON 文件如下所示：

{"cities": {

    {   
        city: "Stockholm", 
        latitud: "59", 
        longitud: "18",
        id: "sthlm"
    }, 
    {
        city: "Göteborg", 
        latitud: "58", 
        longitud: "12",
        id: "gbg"
    },
    {
        city: "Malmö", 
        latitud: "55", 
        longitud: "13",
        id: "malmo"
    },
    {
        city: "Umeå", 
        latitud: "63", 
        longitud: "20",
        id: "umea"
    }
}
}

【问题讨论】：

您没有传递有效的 URI。 URI 中不能有空格。
JSON 格式也错误 - 每个对象的键都需要进行字符串转义，并且城市应该是一个数组。
@AndrewCounts 我没有得到同样的结果。
@AndrewCounts 原来你可以在其中有一个空格，显然是 JSON 文件错误。我现在可以得到它。
@surfitscrollit 你能发表你的评论作为答案吗？我得到了回答该主题的有用答案，但您的评论解决了这个问题。

标签： javascript json angularjs http

【解决方案1】：

在您的 local 文件中，您会收到 JSON 解析异常，因为您的 JSON 格式严重错误。试试这种格式：

{
    "cities": [
        {
            "city": "Stockholm",
            "latitud": "59",
            "longitud": "18",
            "id": "sthlm"
        }
    ]
}

【讨论】：

【解决方案2】：

您不能对本地文件进行跨域请求。否则网站可能会随意请求您计算机上的文件。

请参阅this question 了解更多信息。建议的解决方案包括在您的机器上运行一个服务器，以便您最终通过 HTTP 调用该文件。 file:// 只是不可接受的用于进行 AJAX 调用的“协议”。

【讨论】：

好吧，如果 Chrome 不允许，我该如何强制它允许呢？或者我怎样才能绕过它？
尝试另一个浏览器，可能是旧的，它仍然允许 XHR 运行。或者在服务器中运行它，甚至在你的计算机上运行。
尝试有关 user1515126 答案的建议。您的本地服务器可能具有限制性访问控制策略。避免 URL 名称中的空格 (http://localhost:81/Webb/angular projekt/jsons/cities.json) 永远不会有坏处。

【解决方案3】：

'http://localhost:81/Webb/angularprojekt/jsons/cities.json' 里面有一个空格。您可以尝试消除 'angular' 和 'projekt' 之间的空格吗？

向外部资源发出 get 请求可以正常工作，但每当我在本地执行此操作时，似乎都无法正常工作。

您是否将服务器的 Access-Control-Allow-Origin 响应标头设置为与您的请求的 Origin 标头匹配？将响应标头设置为原始请求标头有效。

还有你如何访问你的 Angular 页面？

【讨论】：

【解决方案4】：

尝试使用相对路径而不是绝对路径：

$http.get('jsons/cities.json')

或类似的东西，取决于您的文件夹结构。

编辑：Here's a Plunkr 显示它正在工作。

编辑 2：看来问题实际上是 JSON 格式错误。正确的格式是：

{
  "cities": [
    {   
        "city": "Stockholm", 
        "latitud": "59", 
        "longitud": "18",
        "id": "sthlm"
    }, 
    {
        "city": "Göteborg", 
        "latitud": "58", 
        "longitud": "12",
        "id": "gbg"
    },
    {
        "city": "Malmö", 
        "latitud": "55", 
        "longitud": "13",
        "id": "malmo"
    },
    {
        "city": "Umeå", 
        "latitud": "63", 
        "longitud": "20",
        "id": "umea"
    }
  ]
}

【讨论】：

【解决方案5】：

假设这将是静态数据。定义一个对象并将其称为脚本。

在 index.html（或其他）中包含引用

<script src="../jsons/citiesJSON.js"></script>

创建一个对象并抽取数据

var GLOBALDATA = {};
GLOBALDATA.citiesJSON =
{"cities": {
{   
    city: "Stockholm", 
    latitud: "59", 
    longitud: "18",
    id: "sthlm"
}, 
{
    city: "Göteborg", 
    latitud: "58", 
    longitud: "12",
    id: "gbg"
},
{
    city: "Malmö", 
    latitud: "55", 
    longitud: "13",
    id: "malmo"
},
{
    city: "Umeå", 
    latitud: "63", 
    longitud: "20",
    id: "umea"
    }
}
} ; // <-- it's a statement now

无需通过 HTTP 请求数据

$scope.cities = GLOBALDATA.citiesJson;

【讨论】：

【解决方案6】：

我使用 $http.get('../jsons/cities.json') 之类的相对路径，但没有用。直到我像这样在 web.config 中添加对 .json 文件的支持

<staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
      </staticContent>

【讨论】：