Angular 5(Ionic)JSONP请求

我想连接到http://api.themoviedb.org以执行GET请求。 由于我使用浏览器(离子服务-l),我得到CORS错误。 为了避免CORS错误,我尝试使用JSONP而没有成功。

这是我所做的:

  • app.module.ts中

    从'@ angular / common / http'导入{HttpClientModule,HttpClientJsonpModule};
    ...
    导入:[BrowserModule,IonicModule.forRoot(MyApp) ,HttpClientModule,HttpClientJsonpModule ],
    ...

  • 在组件的.ts文件中:
    从'rxjs / Observable'导入{Observable};
    从'@ angular / common / http'导入{HttpClient};
    ...

    //在课堂里
    电影:Observable <any>;
    构造函数(public navCtrl:NavController,public navParams:NavParams,public http:HttpClient)
    {
    const url =“https://api.themoviedb.org/3/movie/550?api_key= [MY_API_KEY]&callback = JSONP_CALLBACK”;
    this.films = this.http.jsonp(url,'callback');
    }
    ...

  • 在组件的.html中:

      <ion-content padding>
          <ion-list>
            <button ion-item>
              {{(films | async)?.title}}
            </button>
          </ion-list>
        </ion-content>
    
  • 我收到一个错误,告诉它无法解析响应:

    这里是错误([MY_API_KEY]是错误代码中的实际API_KEY):

    Uncaught TypeError: ["ng_jsonp_callback_0","JSONP_CALLBACK"] is not a function
        at 550?api_key=[MY_API_KEY]&callback=ng_jsonp_callback_0&callback=JSONP_CALLBACK:1
    (anonymous) @ 550?api_key=[MY_API_KEY]&callback=ng_jsonp_callback_0&callback=JSONP_CALLBACK:1
    core.js:1350 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "JSONP Error", url: "https://api.themoviedb.org/3/movie/550?api_key=303…lback=ng_jsonp_callback_0&callback=JSONP_CALLBACK", ok: false, …}
    

    这里是收到的回应:

    ["ng_jsonp_callback_0", "JSONP_CALLBACK"]({"adult":false,"backdrop_path":"/87hTDiay2N2qWyX4Ds7ybXi9h8I.jpg","belongs_to_collection":null,"budget":63000000,"genres":[{"id":18,"name":"Drama"}],"homepage":"http://www.foxmovies.com/movies/fight-club","id":550,"imdb_id":"tt0137523","original_language":"en","original_title":"Fight Club","overview":"A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground "fight clubs" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.","popularity":61.167619,"poster_path":"/adw6Lq9FiC9zjYEpOqfq03ituwp.jpg","production_companies":[{"name":"Twentieth Century Fox Film Corporation","id":306},{"name":"Regency Enterprises","id":508},{"name":"Fox 2000 Pictures","id":711},{"name":"Taurus Film","id":20555},{"name":"Linson Films","id":54050},{"name":"Atman Entertainment","id":54051},{"name":"Knickerbocker Films","id":54052}],"production_countries":[{"iso_3166_1":"DE","name":"Germany"},{"iso_3166_1":"US","name":"United States of America"}],"release_date":"1999-10-15","revenue":100853753,"runtime":139,"spoken_languages":[{"iso_639_1":"en","name":"English"}],"status":"Released","tagline":"Mischief. Mayhem. Soap.","title":"Fight Club","video":false,"vote_average":8.300000000000001,"vote_count":11124})
    

    据我所知,它应该返回一个javascript函数的名字来处理数据。 但我似乎在通过回调方式时出现了问题,并且无法找到有关如何使用新HttpClient执行此操作的示例。

    链接地址: http://www.djcxy.com/p/47567.html

    上一篇: Angular 5 (Ionic) JSONP request

    下一篇: How do I test a JSONP HTTP request in Angular?