如何使用 AngularJS 从其他域（无回调函数）加载 JSON 数据对象

Posted 2023-03-03

【中文标题】如何使用 AngularJS 从其他域（无回调函数）加载 JSON 数据对象

【英文标题】：How to load a JSON data Object from other domain (no callback function) with AngularJS

【发布时间】：2014-10-10 08:28:42

【问题描述】：

是否可以在 AngularJS 中加载没有回调函数的 JSON 数据？如果我手动下载 json 文件并将 url 更改为“phones/phones.json”。在 jQuery 中可以使用 http://www.sitepoint.com/jsonp-examples/

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

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
    function ($scope, $http) 
    $http.get('https://raw.githubusercontent.com/angular/angular-phonecat/master/app/phones/phones.json').success(function(data) 
        $scope.phones = data.splice(0, 5);
    );

    $scope.orderProp = 'age';

]);

已解决：谢谢！我将“raw.githubusercontent.com/angular/angular-phonecat/master/app/phones/phones.json”更改为“rawgit.com/angular/angular-phonecat/master/app/phones/phones.json”

见https://rawgit.com/faq

正如 Jared 所说，这是服务器端问题。

【问题讨论】：

你检查了$http.jsonpdocs.angularjs.org/api/ng/service/$http#jsonp。也检查这个***.com/questions/12066002/…

你到底想做什么？

@Jack 我试过 $http.jsonp。我想使用其他网站的 json 数据。我使用 $http.jsonp 编辑了另一个示例。

【参考方案1】：

问题不在于您的客户端，而在于您的服务器。

http://plnkr.co/edit/a7K79KTae3CPPZx7XMfH?p=preview

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

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
    function ($scope, $http) 
    $http.get('https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS').success(function(data) 
        $scope.phones = data;
    );

    $scope.orderProp = 'age';

]);

这实际上是指向不同 URL 的相同代码，并且可以正常工作。

我认为您需要 HTTP 请求的响应包含值为“*”的“Access-Control-Allow-Origin”标头才能访问其他站点的内容。具体方法取决于您的服务器技术。