Question

我一直在尝试连接AngularJS和Twitter API。这一切都始于遵循关于AngularJS twitter搜索的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。

Answer 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时，它就是因为你使用了错误的方法，就像提到错误一样。

darul75结帐ng-twitter，它看起来像你需要的，如果没有，它可以是一个很好的阅读来源:) 这是demo page。

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

Answer 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

Answer 3

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/

Answer 4

此博客文章有效。 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

我知道你的帖子已经过时了，但没有接受答案，所以希望这有助于：）

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

4 个答案: