Angular JS 和 Twitter API，我们如何将它们连接起来答案

【问题标题】：Angular JS and Twitter API, how can we hook them upAngular JS 和 Twitter API，我们如何将它们连接起来
【发布时间】：2016-03-07 07:57:22
【问题描述】：

我一直在尝试连接AngularJS 和Twitter API。这一切都始于在 AngularJS 推特搜索中遵循John Lindquist's video 上的说明。基本上是下面的代码

var app = angular.module("MyApp", ["ngResource"]);

function MyCtrl($scope, $resource) {
  var TwitterAPI = $resource("http://search.twitter.com/search.json",
    { callback: "JSON_CALLBACK" },
    { get: { method: "JSONP" }});

  $scope.search = function() {
    $scope.searchResult = TwitterAPI.get({ q: $scope.searchTerm });
  };
}

但问题是，这会生成 401 Unauthorized。谷歌上的一些搜索显示，自从本教程发布以来，Twitter 已经改变了它的 API。我发现另一篇关于使用OAuth2 with AngularJS to access Twitter 的文章。其中有以下

var consumerKey = encodeURIComponent('<your consumer key>')
var consumerSecret = encodeURIComponent('<your consumer secret>');
var credentials = Base64.encode(consumerKey + ':' + consumerSecret);

// Twitters OAuth service endpoint
var twitterOauthEndpoint = $http.post(
  'https://api.twitter.com/oauth2/token'
  , "grant_type=client_credentials"
  , {headers: {'Authorization': 'Basic ' + credentials, 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}
);

然而这也以控制台上的以下错误告终

> OPTIONS https://api.twitter.com/oauth2/token 405 (Method Not Allowed) 
> XMLHttpRequest cannot load https://api.twitter.com/oauth2/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

我已经走了这么远，但不知道接下来要做什么才能使用来自 twitter 的 $resource 获取搜索结果。不知道这是否有帮助，但我也在使用 Firebase。

【问题讨论】：

Origin is not allowed by Access-Control-Allow-Origin的可能重复
错误的意思是 Twitter 不允许通过来自任何其他域的浏览器使用该 API。
@user1066946 是否有本地测试？

标签： angularjs api twitter oauth-2.0 firebase

【解决方案1】：

您可能会收到此错误，因为您正在尝试执行 POST 请求，而不是 GET 请求：

    var twitterOauthEndpoint = $http.get(
  'https://api.twitter.com/oauth2/token'
  , "grant_type=client_credentials"
  , {headers: {'Authorization': 'Basic ' + credentials, 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}}
);

一般来说，每当你得到 405，那是因为你使用了错误的方法，就像错误提到的那样。

结帐ng-twitter by darul75，看起来它可以满足您的需要，如果没有，它可以是一个很好的阅读来源：）这是demo page。

编辑：我忽略了第二个控制台错误。如果您直接从文件运行应用程序，请尝试切换到本地服务器（甚至是 Dropbox 的公用文件夹）。

【讨论】：

该演示对自己的域运行 http 请求（http://darul-demo.herokuapp.com/search?hashtag=football）而不是 twitter API
或者正如自述文件所说的"So one thing you need to do on your own is the server side."，因为这件事的作者也面临着CORS问题，这就是这个问题的意义
@GabrielG ng-twitter 很棒，但我仍然需要核心 twitter api，因为我主要关心的是搜索 twitter users 而不是推文，一旦我可以获得 OAuth 来获得身份验证。
好吧，我的错..无论如何，你绝对不必在 Twitter 域下运行你的应用程序来使用他们的 REST API :)
@NSCoder，你从哪里运行你的应用程序？是形成本地服务器还是直接通过文件？

【解决方案2】：

XMLHttpRequest cannot load https://api.twitter.com/oauth2/token.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:3000' is therefore not allowed access.

这意味着从http://127.0.0.1:3000 开始，您的浏览器将不允许 JavaScript 从 HTTP 调用中获取结果。进一步No 'Access-Control-Allow-Origin' header is present 表示这适用于您可以从中调用的每个域（api.twitter.com 除外）。

通读 OAuth API 文档，除了有人询问如何执行 CORS 请求并且他们无法从浏览器调用 API 之外，我找不到其他任何信息。所有JavaScript Twitter libraries都是NodeJS，是服务端。

GabrielG 还指出调用返回了https://api.twitter.com/oauth2/token 405 (Method Not Allowed)，这意味着浏览器无法查找是否允许执行POST，它使用OPTIONS 方法来执行此操作。这并不意味着您不应该使用POST

【讨论】：

【解决方案3】：

这篇博文有效。 http://www.sitepoint.com/building-twitter-app-using-angularjs/

基本上，您不能只查询 twitter 搜索 API。你需要去https://apps.twitter.com/设置一个可以和API通信的应用，然后你也需要使用oauth（我个人用oauth.io创建了一个帐户）。

这一切都在博文中。

在基本的东西之后，我建议阅读 twitter api 文档： https://dev.twitter.com/rest/public

我知道你的帖子很旧，但没有接受的答案，所以希望这会有所帮助:)

【讨论】：

有了博文中的解决方案，就不需要node.js了，挺好的。

【解决方案4】：

twitter 不再支持博客解释查询的方式。 Twitter 更改了它的 API，现在您需要对每个此类请求进行身份验证/授权。这里有一个工作示例

https://blog.twitter.com/2014/rendering-tweets-with-angularjs-and-nodejs

这将需要您的应用和密钥以及访问密钥和密钥。这将允许您获取结果。我希望这将有所帮助。这里也有关于这方面的好信息

https://beautifulbytes.wordpress.com/2013/06/18/oauth2-with-angularjs-to-access-twitter/

【讨论】：