Accessing JSON Data with AngularJS and Twitter Streaming API

Question

To start, I am working on my tweetganic app that needs to access the twitter streaming API, client side, and manage the results via AngularJS.

This is my Coffeescript/JS:

@AccountCtrl = ["$scope", "$http", ($scope, $http) ->
  $scope.doSearch = ->
    $scope.twitter = $http.post("https://tweetganic:password@stream.twitter.com/1.1/statuses/filter.json",
        track: $scope.searchTerm)
]

I get this error in the console when I click a button that runs doSearch():

OPTIONS https://stream.twitter.com/1.1/statuses/filter.json 401 (Unauthorized) angular.js:9231
 (anonymous function) angular.js:9231
 sendReq angular.js:9066
 $http angular.js:8857
 $http.(anonymous function) angular.js:9012
 $scope.doSearch twitter_accounts.js:9
 (anonymous function) angular.js:6299
 (anonymous function) angular.js:12880
 Scope.$eval angular.js:7994
 Scope.$apply angular.js:8074
 $delegate.__proto__.$apply localhost:500
 (anonymous function) angular.js:12879
 (anonymous function) angular.js:1959
 forEach angular.js:134
 eventHandler angular.js:1958
XMLHttpRequest cannot load https://stream.twitter.com/1.1/statuses/filter.json. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

Why am I not getting how to open a connection with the streaming twitter api via angular?

Repository: https://github.com/brianpetro/tweetganic

Answer 1

This is a CORS issue. The twitter streaming api doesn't support CORS.

You could use a proxy https://github.com/gr2m/CORS-Proxy