加载跨域 JSON 文件答案

【问题标题】：Loading Cross domain JSON file加载跨域 JSON 文件
【发布时间】：2014-06-14 04:55:38
【问题描述】：

我有一个 JSON 文件，我想使用 Angular.JS 加载它。目前我正在使用下面的代码，它正在完美地加载本地 JSON 文件数据。但我想在不同的服务器上加载相同的 JSON 文件。你能帮我从不同的服务器加载相同的 JSON 文件吗？非常感谢您的帮助。

// JS

angular.module('list', []);

function ListCtrl($scope, $http) {
$http({
method: 'GET',
url: 'http://mywebsite/json_price_1.json?callback=angular.callbacks._1'
}).success(function(data) {
$scope.posts = data.posts; // response data
$scope.categories = [];
angular.forEach(data.posts, function(artist, index) {
  angular.forEach(artist.categories, function(album, index){
    $scope.categories.push(album);
  });
});
});
}

// HTML

<div ng-controller="ListCtrl">
<ul ng-repeat="artist in posts">
  <li>{{artist.slug}}</li>
</ul>
</div>

<h3>List of Albums</h3>

<div ng-controller="ListCtrl">
<ul ng-repeat="album in categories">
  <li>{{album.name}}</li>
</ul>
</div>

// JSON 文件

      {
"found": 22,
"posts": [
    {
        "ID": 85,
        "site_ID": 1,
        "author": {
            "ID": 1,
            "email": false,
            "name": "admin",
            "URL": "",
            "avatar_URL": "http:\/\/0.gravatar.com\/avatar\/aceb79084bb744b314d7af6485d80f72?s=96&d=http%3A%2F%2F0.gravatar.com%2Favatar%12345%3Fs%3D96&r=G",
            "profile_URL": "http:\/\/en.gravatar.com\/12345"
        },
        "date": "2014-06-06T15:00:12+00:00",
        "modified": "2014-06-06T15:00:12+00:00",
        "title": "Article22",
        "URL": "http:\/\/mywebsite.com\/tankers\/abc\/article22\/",
        "short_URL": "http:\/\/wp.me\/123-1n",
        "content": "<p>ar 16 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.<\/p>\n",
        "excerpt": "<p>ar 16 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex &hellip; <a href=\"http:\/\/mywebsite.com\/tankers\/abc\/article22\/\">Read More<\/a><\/p>\n",
        "slug": "article22",
        "guid": "http:\/\/mywebsite.com\/?p=85",
        "status": "publish",
        "sticky": false,
        "password": "",
        "parent": false,
        "type": "post",
        "comments_open": true,
        "pings_open": true,
        "likes_enabled": true,
        "sharing_enabled": true,
        "gplusauthorship_enabled": false,
        "comment_count": 0,
        "like_count": 0,
        "i_like": false,
        "is_reblogged": false,
        "is_following": false,
        "global_ID": "1234567890",
        "featured_image": "http:\/\/mywebsite.com\/wp-content\/uploads\/2014\/06\/article1.jpg",
        "format": "standard",
        "geo": false,
        "publicize_URLs": [

        ],
        "tags": {

        },
        "categories": {
            "Abc": {
                "name": "abc",
                "slug": "abc",
                "description": "",
                "post_count": 7,
                "meta": {
                    "links": {
                        "self": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/1111\/categories\/slug:aframax",
                        "help": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/1111\/categories\/slug:aframax\/help",
                        "site": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/1111"
                    }
                }
            }
        },

【问题讨论】：

标签： json wordpress angularjs cross-browser

【解决方案1】：

你在 Angular 中像这样制作 jsonp（跨域请求）...

var url = $http.jsonp('http://mywebsite/json_price_1.json&callback=JSON_CALLBACK');

然后您在成功函数中遍历数据

url.success(function(data) {
           //foreach statement
});

如果您有一个 wordpress 网站 - 您应该使用它来允许跨域 ajax 并构建 API：http://wordpress.org/plugins/json-api/

【讨论】：

【解决方案2】：

要执行 xdomain（跨域），您需要执行 JSONP

http://en.wikipedia.org/wiki/JSONPjsonp 一般信息

https://docs.angularjs.org/api/ng/service/$http#jsonp angularjs http.jsonp 实现

虽然如果其他服务器上的命名文件不属于您并且您无法将其更改为 jsonp，那么您只剩下后端解决方案

【讨论】：