从 Postman 调用 Twitter API 有效，但从 Angular 2 应用程序调用却不行

Posted 2023-03-04

【中文标题】从 Postman 调用 Twitter API 有效，但从 Angular 2 应用程序调用却不行

【英文标题】：Calling Twitter API from Postman works, but from Angular 2 app it doesnt'

【发布时间】：2016-07-30 08:25:27

【问题描述】：

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

当我从 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;

【问题讨论】：

您尚未将Access-Control-Allow-Origin 标头添加到您的标头中。该错误清楚地告诉您它是必需的。

【参考方案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 类（而不是 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()
     );

查看 rhis 问题了解更多详情：

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

【讨论】：

谢谢，但不幸的是这不起作用。我收到 400 或 401 错误，当我查看 devtools 时，我什至没有将 Authorization 视为标头之一，所以我担心添加标头的语法不正确

我刚刚在文档中阅读了有关回调参数的内容：“如果提供，响应将使用带有给定名称回调的 JSONP 格式。此参数的实用性因要求而有所降低对此端点的请求的身份验证。”。见dev.twitter.com/rest/reference/get/search/tweets。

您是否导入了Headers 类？ import Http, Headers, ... from 'angular2/http'。如果在导入中没有它，则不会发送标头，也不会出现错误消息...

是的，你是对的！我们可以发送标头，因为 jsonp 依赖于在 html 页面中添加脚本标签...

我们可以还是不能？