从 Postman 调用 Twitter API 是可行的，但从 Angular 2 应用程序调用它却不行'

Question

我正在尝试在我的应用程序中使用 Twitter API。

当我从 Postman 运行它时，效果很好。

但是，当我从我的应用程序运行使用 Google Chrome 时，我得到

XMLHttpRequest cannot load https://api.twitter.com/1.1/search/tweets.json?q=canada. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 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 ]);

然后注入 Jsonp class（而不是 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()
     });

有关详细信息，请参阅此问题：

从 Postman 调用 Twitter API 是可行的，但从 Angular 2 应用程序调用它却不行'

Calling Twitter API from Postman works, but from Angular 2 app it doesnt'

twitter

http

cors

postman

angular