Angular2 JSONP回调无法正常工作

时间:2017-03-22 20:15:05

标签: angular jsonp

我正在使用Firebase上托管的Angular2 CLI App并使用Firebase Realtime DB。为了通过第三方OAuth验证应用用户并提供要生成的安全自定义令牌,我使用Google Cloud功能来处理OAuth并创建令牌。然后,通过从CLI应用程序到Cloud功能的JSONP请求,此令牌将返回到Angular2 cli应用程序。使用JSONP的原因是云功能托管在谷歌域上,这会产生CORS问题。

我已经解决了OAuth的复杂问题并成功发布了最终的JSONP请求,如下所示 -

      let tokenFunctionURL = 'https://us-central1-' + [FIREBASE PROJECT ID] + '.cloudfunctions.net/token';
  let url = tokenFunctionURL +
    '?callback=JSONP_CALLBACK';

jsonp
    .request(url, {method:'Get'})
    .map(res=>res.json())
    .subscribe(res => {
      console.log(res);
    });

对于我收到的上述GET电话回复,我认为这是一个有效的回复如下 -

/**/ typeof __ng_jsonp____req0_finished === 'function' && __ng_jsonp____req0_finished({"token":"eyJhbGci..."});

但随之而来的是我在Chrome开发者控制台中收到以下错误消息 -

error_handler.js:54 EXCEPTION: Response with status: 200 Ok for URL: https://us-central1-[FIREBASE PROJECT ID}.cloudfunctions.net/token?callback=__ng_jsonp____req0_finished
Subscriber.js:227 Uncaught Response {_body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: Headers…}

我现在已经尝试了这个数字好几个小时,但只是不知道如何克服它。我确实看到Stack Overflow中的其他线程解决了这个问题,但似乎没有明确的答案,或者至少是一个适合我的答案。

跟踪Angular中的代码,我找到了以下链接 - I found this link,这似乎表明JSONP调用没有完成(或者方法finish()从未被Angular 2的内部调用堆)。

感谢。

编辑 - 我通过将Angular2堆栈从2.4.6升级到2.4.10来解决了这个问题。显然,该问题是在该特定版本中引入的。见这里 - https://github.com/angular/angular/issues/14267 虽然这个问题因为明显有效的原因而被投票,但我希望这一发现能够帮助那些面临同样问题的人。

0 个答案:

没有答案