无法从本地服务器上的 URL 读取 AngularJS $http 中的 JSON答案

【问题标题】：Unable to read JSON in AngularJS $http from URL on local server无法从本地服务器上的 URL 读取 AngularJS $http 中的 JSON
【发布时间】：2015-06-28 04:12:20
【问题描述】：

我正在开发我的第一个 AngularJS 应用程序，对于我的数据，我正在尝试从本地机器上的 Drupal 网站的页面中读取数据。它在 Apache 上运行，并且可以从别名 URL 访问（即http://mylocalsite 而不是http://localhost/mylocalsite）。该页面只显示一个 JSON 数据数组，但由于某种原因，我的 Angular 应用程序也无法使用 $http 读取它

angular.module('nbd7AppApp')
  .controller('BlogListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('http://mylocalsite/blogs/json'})
      .success(function(data) {
        $scope.nodes = data;
    });
  }]);

或

angular.module('nbd7AppApp')
  .controller('BlogListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http({method: 'GET', url: 'http://mylocalsite/blogs/json'})
      .success(function(data) {
        $scope.nodes = data;
    });
  }]);

但是，如果我将 JSON 放入本地文件并像这样访问它

angular.module('nbd7AppApp')
  .controller('BlogListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('views/blogs.json')
      .success(function(data) {
        $scope.nodes = data;
    });
  }]);

完美运行。我需要做些不同的事情才能从站点 URL 中读取它吗？

谢谢。

【问题讨论】：

控制台有错误提示吗？
如果您在 Angular 应用的页面上显示 Chrome 调试器，您在网络选项卡中看到的 http 请求正文与本地 JSON 文件中的内容是否相同？在您从中获取 JSON 的服务器上，字符编码是否设置为 UTF8？
blogs/json 是别名的一部分吗？我的意思是，是否将其翻译成blogs.json？
哦，是的，控制台。是的，它给了我一个错误：XMLHttpRequest cannot load mylocalsite/blogs/json。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost:9000' 不允许访问。我在与网站所在端口不同的端口上运行 Angular 应用程序。
您可以添加一个白名单，用于角度的跨站点访问。默认情况下，出于安全考虑，javascript 只能访问同一个域

标签： json angularjs angularjs-scope angular-http

【解决方案1】：

正如我上面的评论所示，答案是CORS。一旦我将此行添加到我的 Apache 虚拟主机：

Header set Access-Control-Allow-Origin "*"

错误消失了。

【讨论】：