Angular的CORS問題

angular angular2

twrichgod 2018-04-05 16:28:56 ‧ 7147 瀏覽

今天使用外部API碰到CORS的問題，
但是如果使用jquery請求的話就不會有問題，
請問我Angular的http請求是哪邊出錯了呢？

API位址

const url = 'https://geoapi.heartrails.com/api/json?method=suggest&matching=like&keyword=' + this.keyword + '&jsonp=?';

jquery版

    $.getJSON(
      url,
      null,
      data => {
        console.log(data);
      }
    );

Angular的http版

    this.http.get(url).map((response: Response) => response.json()).subscribe(
      data => {
        console.log(data);
      }
    );

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

暐翰

iT邦大師 1 級 ‧ 2018-04-05 18:46:06

最佳解答

添加jsnop_provider
接著把你的http物件類別Http換成Jsnop

參考:【 How to make a simple JSONP asynchronous request in Angular 2?
】https://goo.gl/5QY8oT

twrichgod iT邦新手 5 級 ‧ 2018-04-05 20:32:28 檢舉

感謝回答，明天上班就試試看。

twrichgod iT邦新手 5 級 ‧ 2018-04-06 09:41:09 檢舉

感謝，成功了！
不過可能是Angular版本的關係，
命令有點不同。

xx.module.ts：

import { JsonpModule } from '@angular/http';
imports: [JsonpModule]

component：

import { Jsonp } from '@angular/http';

API的url要加JSONP_CALLBACK，變成：

const url = 'https://geoapi.heartrails.com/api/json?method=suggest&matching=like&keyword=' + this.keyword + '&jsonp=JSONP_CALLBACK';

暐翰 iT邦大師 1 級 ‧ 2018-04-06 11:41:24 檢舉

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

IT邦幫忙