在AngularJS中爲$ http服務使用JSONP方法

我是AngularJS的一個相對新手，併成功地使用了$ http的GET方法來完成一個基本的概念驗證應用程序，現在我試圖使用JSONP方法從我給出的遠程URL中拉取一些JSON。我已經在這裏創造一個基本的plunker顯示我想要做的事：http://plnkr.co/edit/Joud0ukAzhgvNM0h9KjB?p=preview

我用這樣的我的控制器內的HTTP請求：

$http({method: 'jsonp', url: 'http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=JSON_CALLBACK'}). 
    success(function(data) { 
    $scope.countries = data; 
    console.log('success'); 
    }). 
    error(function(data) { 
    console.log('error'); 
    });

...但我根本沒有任何東西（控制檯中的'錯誤'除外）。我知道該URL返回有效的JSON（http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0），但我只是沒有得到任何回...

來源

2013-06-12 ParkerDigital

你可以檢查以下網址查看您的功能：https://gdata.youtube.com/feeds/api/users/orbitalofficial/uploads?alt=json-in-script&callback=JSON_CALLBACK –

JSONP要求你將你的JSON響應包裝成一個Javascript函數調用。當您執行JSONP時，請求查詢字符串將設置一個名爲「callback」的參數，該參數將告訴您的服務器如何包裝JSON響應。

所以反應應該是這樣的：

callback([ 
    {"id": "1", "name": "John Doe"}, 
    {"id": "2", "name": "Lorem ipsum"}, 
    {"id": "3", "name": "Lorem ipsum"} 
]);

角將取決於有多少請求定義回調參數作爲angular.callbacks._0，angular.callbacks._1，angular.callbacks._2 ...它正在等待響應，因此，如果你做一個單一的請求的響應應該是：

angular.callbacks._0([ 
    {"id": "1", "name": "Lorem ipsum"}, 
    {"id": "2", "name": "Lorem ipsum"}, 
    {"id": "3", "name": "Lorem ipsum"} 
]);

服務器應該使用回調參數從請求字符串來設置相應的響應。

檢查您的Plunker's網絡活動，您將看到該請求正在設置回調參數，但您所得到的響應未被包裝。

enter image description here

來源

2013-06-12 10:41:44 Bema

啊哈，我看到 - 在這種情況下，我想我需要查看是否可以修改響應以適應此情況。謝謝 – ParkerDigital

有沒有什麼辦法讓js應用程序內部的這個非包裝響應？ – Nahn

我不這麼認爲，瀏覽器實現[同源策略]（http://en.wikipedia.org/wiki/Same_origin_policy），並且就我而言，JSONP是製作跨域請求的唯一方法。 – Bema

在AngularJS中爲$ http服務使用JSONP方法

回答

相關問題