PostmanからTwitter APIを呼び出せますが、Angular 2 appからはそれがありません。

Question

私のアプリでTwitter APIを使用しようとしています。

私はPostmanから実行すると、素晴らしい動作します。しかし

、私はGoogle Chromeを使用して、私のアプリからそれを実行して、私は

のXMLHttpRequestが https://api.twitter.com/1.1/search/tweets.json?q=canadaをロードすることはできませんを取得します。 プリフライト要求に応答してアクセス制御チェックを通過しません。いいえ 要求された リソースに 'Access-Control-Allow-Origin'ヘッダーが存在します。したがって、オリジン 'http://localhost:3000'は許可されません。 応答は、ここでHTTPステータスコード400

を持っていたこと

... 

    getTweets(hashtag : string){ 
     var headers = new Headers(); 
     headers.append('Authorization', 'Bearer AAAAAAAAAAAAAAAAAAAAAONruQAAAAAAfxQda4njz64axXN9sw4U0oU%3Dr1niTwKwXoOZXmZczDKgN0wWHWEMPrPcnXXMgVQhiTIzays7J'); 
     var requestOptions = new MyRequest(); 
     requestOptions.headers = headers; 

     return this.http.get('https://api.twitter.com/1.1/search/tweets.json?q=montreal', requestOptions); 
    } 
} 

class MyRequest implements RequestOptionsArgs { 
    public headers: Headers; 
} 

Answer 1

は、TwitterのAPIは、CORSが、JSONPをサポートしていないために私のコードです。したがって、Angular2のJSONPサポートを活用する必要があります。

ここはサンプルです。アプリケーションをブートストラップするときに最初に対応するプロバイダを指定します。

import {bootstrap} from 'angular2/platform/browser' 
import {JSONP_PROVIDERS} from 'angular2/http' 
import {AppComponent} from './app.component' 

bootstrap(AppComponent, [ JSONP_PROVIDERS ]); 

は、次に（HTTPではなく1の）JSONPクラスを注入し、あなたの要求を作ってそれを使用します。

export class AppComponent { 
    constructor(jsonp:Jsonp) { 
    var url = 'https://api.twitter.com/1.1/search/tweets.json?q=montreal&callback=JSONP_CALLBACK'; 

    var headers = new Headers(); 
    headers.append('Authorization', 'Bearer AAAAAAAA(...)sw4U0oU%'); 

    jsonp.request(url, { method: 'Get', headers: headers }) 
    .subscribe((res) => { 
     this.result = res.json() 
    }); 

は、より多くの詳細についてはRHIS質問を参照してください。 ：

• I need to do a http request to a mail chimp subscription list via a component post