angular.js - AngularJS 用 $http.jsonp 方法跨域請求資料錯誤的問題

Question

以前知道AngularJS是個什麼東西，今天剛開始動手嘗試，遇到了這個問題。

程式碼如下：

$http.jsonp("https://request.address.json?callback=JSON_CALLBACK")
    .success(
        function(data, status, header, config){
            $scope.list = data;
            alert(data);
        }
    )
    .error(
        function(data){
            alert("error");
        }
    );

訪問後透過瀏覽器的開發者工具能看到返回的狀態碼是200，並且能看到返回的json字符串，但是執行後總是error方法被調用，找了很久也找不到解決方法，有麼有高手能解答一下。

Answer 1

客戶端方面，官方文件說的很清楚的“Relative or absolute URL specifying the destination of the request. The name of the callback should be the string JSON_CALLBACK.”服務端的話，get到的callback參數是angular在客戶端計算過的angular.callbacks._0之類的(在發送之前angular會根據客戶端的請求次數做計算，更新callback字段值)，服務端接收到callback字段後，以字符串'angular. callbacks._0({json資料})'回傳就可以了，例如：

<?php
$callback = $_GET['callback'];
$response = array('code'=>200, 'data'=>'success');

$json = json_encode($response);
echo "$callback($json)";

Answer 2

貼出回傳的json看看

Answer 3

後端介面需要對 jsonp 的請求做特殊的處理，請求帶了 callback 的參數：

回傳應該是一段 JavaScript 程式碼：

angular.callbacks._0({
    "longitude": 120.1614,
    "latitude": 30.2936,
    "asn": "AS4837",
    "offset": "8",
    "ip": "60.12.58.161",
    "area_code": "0",
    "continent_code": "AS",
    "dma_code": "0",
    "city": "Hangzhou",
    "timezone": "Asia\/Shanghai",
    "region": "Zhejiang",
    "country_code": "CN",
    "isp": "CNCGROUP China169 Backbone",
    "country": "China",
    "country_code3": "CHN",
    "region_code": "02"
});

這個和 JSONP 可以跨域的特新相關，JSONP 是使用 script tag 作為請求的載體的；而 Ajax 是透過 XHR 物件。

Answer 4

返回內容改成：

JSON_CALLBACK({
    "longitude": 120.1614,
    "latitude": 30.2936,
    "asn": "AS4837",
    "offset": "8",
    "ip": "60.12.58.161",
    "area_code": "0",
    "continent_code": "AS",
    "dma_code": "0",
    "city": "Hangzhou",
    "timezone": "Asia\/Shanghai",
    "region": "Zhejiang",
    "country_code": "CN",
    "isp": "CNCGROUP China169 Backbone",
    "country": "China",
    "country_code3": "CHN",
    "region_code": "02"
})

試試？

Answer 5

jsonp(url,[config])只能處理JSONP格式的結果（JSON != JSONP），如果你回傳的資料是JSON格式,jsonp()是無法解析的，會報錯。

Answer 6

參數為callback=JSON_CALLBACK，angular會自動為你取代你的JSON_CALLBACK並指派callbackName。
你能請求到數據，但無法走進sccess裡面，是因為沒有觸發angular為你設定的callback。我覺得這個略坑，沒有jQuery設計的貼近用戶

Answer 7

樓主解決了嗎？ 我也遇到跟你一樣的問題， 瀏覽器上能正常走到success，手機上調試總是進入error， data=undefined status：404

Answer 8

樓主解決了嗎？ 我也遇到跟你一樣的問題。
控制台顯示：JSON_CALLBACK is not defined

$http.jsonp('http://m-static.igrow.cn/01tpl/json/data.json?callback=JSON_CALLBACK');
//加上這個就能調到資料、但是感覺很奇怪。
window.JSON_CALLBACK = function(data) {

console.log(data);

};

假如我需要在返回error的時候執行其他事情又該怎麼做?