AngularJS 用 $http.jsonp 方法跨域请求数据错误的问题

范斌
  • 596

以前知道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方法被调用,找了很久也找不到解决办法,有么有高手能解答一下。

回复
阅读 31.2k
8 个回答
✓ 已被采纳

客户端方面,官方文档说的很清楚的“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)";

贴出返回的json看看

后端接口需要对 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 对象。

返回内容改成:

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"
})

试试?

mynameisbxh
  • 1
新手上路,请多包涵

jsonp(url,[config])只能处理JSONP格式的结果(JSON != JSONP),如果你返回的数据是JSON格式,jsonp()是无法解析的,会报错。

whitekyo
  • 1
新手上路,请多包涵

参数为callback=JSON_CALLBACK,angular会自动为你替换你的JSON_CALLBACK并分配callbackName。
你能请求到数据,但无法走进sccess里面,是因为没有触发angular为你设置的callback。我觉得这个略坑,没有jQuery设计的贴近用户

永夜之光
  • 1
新手上路,请多包涵

楼主解决了吗? 我也遇到跟你一样的问题, 浏览器上能正常走到success,手机上调试总是进入error, data=undefined status:404

楼主解决了吗? 我也遇到跟你一样的问题。
控制台显示: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的时候执行其他事情又该怎么做?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏