首页 文章

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

提问于
浏览 次
3

我想在我的应用程序中使用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;
}
http twitter angular cors postman

1 回答

  • 0

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

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

    回复于

相关问题