JSONP 注入脚本未调用回调

Posted 2023-03-03

【中文标题】JSONP 注入脚本未调用回调

【英文标题】：JSONP injected script did not invoke callback

【发布时间】：2016-11-11 04:14:45

【问题描述】：

我正在尝试从 Rest Api 获取数据：

我尝试了以下操作：

var headers: Headers= new Headers(  'dataType': 'jsonp');
    let options = new RequestOptions( headers: headers );

    return this.http.get('http://aaaddds.de/redmine/issues.json?limit=1200&callback=JSONP_CALLBACK', options)
      .map(this.extractData);

它不起作用，因为：

 No 'Access-Control-Allow-Origin' header

所以当我尝试 JSONP 时

let params = new URLSearchParams();
params.set('callback', 'JSONP_CALLBACK');
params.set('project_id', '7');
params.set('key', '42d3db30ab061a9f630df1f476c4d127f98d5ad2');
params.set('limit', '1200');


return this.jsonp.get('http://aaaddds.de/redmine/issues.json',  search: params )
  .map(this.extractData);

上面写着：

未捕获的 ReferenceError: __ng_jsonp____req0finished 未定义 JSONP 注入脚本没有调用回调

当我执行 Jquery ajax 时，它会起作用：

   $.ajax(

      url: url,
      type: 'GET',
      dataType: 'jsonp',
      success: function (datsa: any) 
        console.log(datsa);
      ,
      error: function (e : any)  alert(e.toString) ,
    );

【参考方案1】：

我认为您为回调提供的参数不是callback。其实这个名字取决于目标服务，可以是callback、c或者别的什么...

要诊断您的问题，您应该查看浏览器中 devtools 的“网络”选项卡以查看响应的内容。应该是这样的：

__ng_jsonp__.__req0.finished( ... )

__ng_jsonp__.__req0 是 Angular2 内部处理的回调的名称。

【讨论】：

好的，c 工作得很好，但是有没有没有回调 /c 参数的解决方案，因为我的 redmine Rest api 不允许我回调 /c 参数并在正文中返回 null

太棒了！我不认为这是可能的，因为 Angular2 会在后台生成回调名称，因此需要将其提供给服务，以便后者可以在响应有效负载中使用此名称...您的 redmine Rest api 如何获取回调名称?

来自redmine doc，似乎可以使用callback或jsonp参数。见redmine.org/projects/redmine/wiki/Rest_api

【参考方案2】：

我解决了这个问题：设置一个变量：times

export class WikipediaService 
    constructor(private jsonp: Jsonp) 
        this.times=0;
        search (term: string) 
        let wikiUrl = 'http://en.wikipedia.org/w/api.php';
        let params = new URLSearchParams();
        params.set('search', term); // the user's search value
        params.set('action', 'opensearch');
        params.set('format', 'json');
        params.set('callback', `__ng_jsonp__.__req$this.times.finished`);
        this.times=this.times+1;
        // TODO: Add error handling
        return this.jsonp
        .get(wikiUrl,  search: params )
        .map(response => <string[]> response.json()[1]);
    

【讨论】：

这对我有用！我将计数器添加为服务中的私有变量。

【参考方案3】：

this._InstUrl = "your url";

let params1 = new URLSearchParams();
//params.set('search', term); // the user's search value
//params.set('action', 'opensearch');
params1.set('format', 'json');
//params1.set('callback', "ng_jsonp.__req0.finished");
params1.set('callback', "JSONP_CALLBACK");

    return this._jsonp
        .get(this._InstUrl,  search: params1 )
        .map(response =>  debugger; this.Result = response.json().data )
        .subscribe(
        (data) => 
            debugger
            console.log(this.Result);
        ,
        (error) => 
            debugger
            console.log(error);
        );

这个 100% 工作请检查

【讨论】：

我仍然遇到错误“JSONP 注入脚本没有调用回调。”