angular2 jsonp跨域请求的问题

1、先上代码

constructor(public http:Http, public jsonp:Jsonp) {
        this.jsonp.request('http://www.eastgrain.cn/data/list.html?callback=JSONP_CALLBACK')
            .map(res => res.json())
            .subscribe((response) => {
                console.log(response);
            }, (error) => {
                console.error(error);
            });
    }

2、报错信息

图片描述

3、求大神讲解,谢谢。

阅读 5.1k
3 个回答

你请求的地址,返回的数据不是jsonp格式的。
jsonp本质上是靠script标签实现的,通过script加载一段js代码,并在加载完成时执行,为了达到这个效果,jsonp返回数据应该是一个函数调用,类似这样func({data1:1,data2:2});
这就需要服务器端程序配合,请求有callback参数时将该值拼接到json上。
所以,如果网站是你的,你得改后台程序,别人的就考虑其他方法吧。

ng2+express+jsonp跨域获取数据问题,终于解决了

1、前端代码块

constructor(public jsonp:Jsonp) {
    // 定义服务器地址
    let wikiUrl = 'http://localhost:3000/users';
    // 定义参数
    var params = new URLSearchParams();
    params.set('callback', 'JSONP_CALLBACK');
    // 使用jsonp模块获取express后台返回的jsonp数据
    jsonp.get(wikiUrl, {search: params})
            .map(res=> res.json())
            .subscribe((response) => {
                console.log(response);
            }, (error) => {
                console.error(error);
            });
    }

2、后台代码块

router.get('/', function(req, res, next) {
  res.jsonp({"name": "heping"});
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进