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

关键词：

【中文标题】从 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 页面中添加脚本标签... 我们可以还是不能？

从 Google Apps 脚本调用 Twitter API

】从GoogleApps脚本调用TwitterAPI【英文标题】：CallingTwitterAPIfromGoogleAppsScript【发布时间】：2014-01-0721:32:09【问题描述】：我正在尝试从GoogleApps脚本调用Twitter的RESTAPI。我正在使用的代码是从这里一对一复制的：https://developers.google.c... 查看详情

如何使用 Zapier 的 Twitter API 进行身份验证？

...用TwitterAPI，但无法通过OAuth1.0正确进行身份验证。使用像Postman这样的REST客户端，简直是小菜一碟。您只需传递消费者密 查看详情

Twitter API Postman：代码 32：无法验证您的身份

】TwitterAPIPostman：代码32：无法验证您的身份【英文标题】：TwitterAPIPostman:Code32:Couldnotauthenticateyou【发布时间】：2019-05-1800:35:01【问题描述】：我想在未来为某个应用测试Twitterapi。我试图用Postman对其进行测试，但我一直收到此错... 查看详情

从 postman 访问 keycloak API

】从postman访问keycloakAPI【英文标题】：AccessthekeycloakAPIfrompostman【发布时间】：2018-08-2502:18:53【问题描述】：我试图从邮递员那里访问keycloakAPI。但它显示400错误请求。我以以下格式调用api。http://hostname:8080/auth/realms/master/protocol/op... 查看详情

是否可以从 Postman 调用 SignalR Hub

】是否可以从Postman调用SignalRHub【英文标题】：IsitpossibletocallaSignalRHubfromPostman【发布时间】：2019-10-2118:49:36【问题描述】：我有一个带有SignalR集线器的ASP.NetCore2.2WebAPI。是否可以使用Postman调用其中一种方法（例如，SendMessageToAll... 查看详情

Laravel API 调用失败。 PostMan 使用 Basic Auth 覆盖 Authorization 标头

】LaravelAPI调用失败。PostMan使用BasicAuth覆盖Authorization标头【英文标题】：LaravelAPIcallfailed.PostManoverridesAuthorizationheaderwithBasicAuth【发布时间】：2017-09-0505:18:47【问题描述】：您好，我正在尝试从Postman调用API。使用的框架是：Laravel... 查看详情

使用 Postman 测试 API，Postman 调用在哪里？

】使用Postman测试API，Postman调用在哪里？【英文标题】：UsingPostmantotestAPI,whereisthePostmancall?【发布时间】：2019-12-1812:38:44【问题描述】：我有一个WebAPI，我正在使用Postman进行测试。当我单击“发送”按钮时，Postman将数据发送到Web... 查看详情

设置postman环境并调用api(代码片段)

... 功能，可快速进行API接口调试，同时也支持通过Postman调用API获取设备信息或控制设备。本文介绍如何设置调用云开发API的Postman开发环境及调用接口实践。配置环境安装 Postman 8.2.2 及以上版本桌面软件。版本过低会出... 查看详情

POSTMAN 在调用 API 时出现内部服务器错误

】POSTMAN在调用API时出现内部服务器错误【英文标题】：InternalservererrorbyPOSTMANwhileinvokingAPI【发布时间】：2021-10-1119:55:43【问题描述】：我正在尝试使用无服务器和AWS制作笔记应用程序。在本地服务器上运行并在Postman的帮助下调... 查看详情

从 twitter api 获取数据

】从twitterapi获取数据【英文标题】：fetchingdatafromtwitterapi【发布时间】：2012-10-0912:15:27【问题描述】：我正在尝试获取Twitter提要。我正在使用这个网址https://twitter.com/status/user_timeline/wwwkrcgenkbe.json?count=25&from=wwwkrcgenkbe此网址提... 查看详情

通过 Postman 调用 National Rail SOAP XML API

】通过Postman调用NationalRailSOAPXMLAPI【英文标题】：NationalRailSOAPXMLAPIcallviaPostman【发布时间】：2017-08-0311:17:15【问题描述】：尝试使用SOAPXML通过Postman调用NationalRailAPI，但得到“401-未经授权：由于凭据无效而拒绝访问”响应。这是... 查看详情

Webpack 开发服务器中 Twitter api 调用的 CORS 问题

】Webpack开发服务器中Twitterapi调用的CORS问题【英文标题】：CORSissuewithTwitterapicallsinWebpackdevserver【发布时间】：2018-08-0615:32:44【问题描述】：我在从twitterapi获取响应时遇到了问题（使用npm包Twitter）。在Chrome中我得到：无法加载htt... 查看详情

从 Twitter 搜索 API 中排除多词关键字

】从Twitter搜索API中排除多词关键字【英文标题】：Excludemulti-wordkeywordsfromTwitterSearchAPI【发布时间】：2020-11-0711:55:47【问题描述】：我有一个要从搜索中排除的关键字列表KEYWORDS=%w[covidcoronasubwayrailwaytravelplanebrazil]exclude=Twitter::KEYWOR... 查看详情

从 https rest api 调用 http rest api 错误 502

...9-12-2702:27:52【问题描述】：我调用我的httpsRESTAPi，它使用Postman在另一台服务器上调用httpapi，它返回502badgateway错误。httpsAPI的身份验证在标头中设置，并且也接受：应用程序/json。所有 查看详情

使用 REST 客户端 POSTMAN 使用 api 密钥调用 AWS api 网关端点

】使用REST客户端POSTMAN使用api密钥调用AWSapi网关端点【英文标题】：MakingcallstoAWSapigatewayendpointwithapikeyusingrestclientPOSTMAN【发布时间】：2015-12-1212:01:19【问题描述】：我们正在开发一个移动/网络应用程序，我们使用awslambda和dynamodb... 查看详情

我可以从 api 访问 Twitter 通知过滤器吗？

】我可以从api访问Twitter通知过滤器吗？【英文标题】：CanIaccesstheTwitternotificationfiltersfromtheapi?【发布时间】：2021-04-1614:35:49【问题描述】：我正在尝试使用API访问Twitter用户的设置，特别是通知过滤器。例如，我想构建一个代码... 查看详情

如何在 IdentityServer ASP.NET Core 中使用 Postman 使用 AntiForgeryToken 调用 API

】如何在IdentityServerASP.NETCore中使用Postman使用AntiForgeryToken调用API【英文标题】：HowtocallAPIwithAntiForgeryTokenusingPostmaninIdentityServerASP.NETCore【发布时间】：2018-11-1209:51:31【问题描述】：我正在尝试使用Postman使用IdentityServerAsp.netCore测... 查看详情

如何从 POSTMAN 调用 WCF 服务方法

】如何从POSTMAN调用WCF服务方法【英文标题】：HowtocallWCFservicemethodfromPOSTMAN【发布时间】：2016-05-0716:26:21【问题描述】：我正在尝试使用WCF端点调用服务。WCF服务托管在Windows服务上，这是配置。<?xmlversion="1.0"encoding="utf-8"?><... 查看详情