Aufruf von Twitter API von Postman funktioniert, aber von Angular 2 App tut es nicht '

Question

Ich versuche, Twitter API in meiner App zu verwenden.

Wenn ich es von Postman laufen, funktioniert es gut.

Allerdings, wenn ich es von meiner app laufen, mit Google Chrome ich

XMLHttpRequest nicht https://api.twitter.com/1.1/search/tweets.json?q=canada laden kann. Antwort auf Preflight-Anforderung nicht übergeben Zugriffskontrolle überprüfen: Nein 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden. Origin 'http://localhost:3000' ist daher nicht erlaubt Zugriff. Die Antwort hatte HTTP-Statuscode 400.

Hier ist mein Code für sie

... 

    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

Die Twitter-API CORS nicht unterstützt, aber JSONP. Sie müssen also die JSONP-Unterstützung von Angular2 nutzen.

Hier ist eine Probe. Sie zuerst die entsprechenden Anbieter angeben, wenn Ihre Anwendung Bootstrapping:

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

bootstrap(AppComponent, [ JSONP_PROVIDERS ]); 

dann die JSONP Klasse injizieren (anstelle des Http eins) und es verwenden, um Ihre Anfrage zu machen:

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() 
    }); 

See RHI Frage für weitere Details :

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