从Postman调用Twitter API工作,但从Angular 2应用程序它没有'

我想在我的应用程序中使用Twitter API .

当我从Postman运行它时,效果很好 .

Postman

但是,当我从我的应用程序运行它时,使用谷歌浏览器我得到了

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

回答(1)

2 years ago

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 ]);

然后注入Jsonp类(而不是Http类)并使用它来发出请求:

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

有关详细信息,请参阅此问题: