使用 Angular 发送 ajax 请求以获取 .json 文件时出错？答案

【问题标题】：Getting an error while sending an ajax request, with Angular, to get .json file?使用 Angular 发送 ajax 请求以获取 .json 文件时出错？
【发布时间】：2014-10-24 20:29:17
【问题描述】：

我有后端创建的.json 文件。现在我正在尝试使用 Angular.js 发出 ajax 请求，以便我的前端可以使用我的 .json 文件中的数据。

这是我的.json 文件的路径：

C:\Users\Mykhaylo Vayvala\Desktop\carBuyer\topCarObj.json

这是我的 html 文件：

<!DOCTYPE html>
<html ng-app="MyApp">
    <head>
        <title>Top cars</title>
    <head>
    <body ng-controller="PostsCtrl">
      <p>{{posts}}</p>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="carApp.js"></script>
    </body>
</html>

这是我使用 Angular.js 的 JavaScript 文件：

var app = angular.module("MyApp", []);

app.controller("PostsCtrl", function($scope, $http) {
  $http.get('topCarObj.json').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      alert("AJAX failed")
    });
});

当我在浏览器中运行我的 html 文件时，我在控制台中收到以下错误：

XMLHttpRequest cannot load file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/topCarObj.json. Cross origin requests are only supported for HTTP. angular.min.js:78
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/topCarObj.json'.
    at Error (native)
    at file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:78:466
    at v (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:73:464)
    at g (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:71:294)
    at I (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:100:144)
    at I (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:100:144)
    at file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:101:308
    at k.$eval (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:112:32)
    at k.$digest (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:109:121)
    at k.$apply (file:///C:/Users/Mykhaylo%20Vayvala/Desktop/carBuyer/angular.min.js:112:362)

我做错了什么，我该如何解决？

【问题讨论】：

您不能使用 XMLHttpRequest 以绝对路径获取本地主机上的文件。您必须使用 http://...，即 http://localhost:8080/file.json。

标签： javascript ajax json angularjs http

【解决方案1】：

将应用程序托管到 localhost 或在其他浏览器上尝试。

对于 chrome，您可以通过以下方式允许：

chrome.exe --allow-file-access-from-files

【讨论】：

@MichaelVayvala 你必须安装像 wamp 或它的替代品这样的服务器，然后在那里托管它。
@MichaelVayvala 现在你可以用上面的命令打开 chrome stackoverflow.com/questions/4208530/…