AngularJS twitter user feed XMLHTTPRequest error 400


#1

Hi, I am trying to create a Tweet rotator using AngularJS and JQUERY but I am getting the following error:
XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/user_timeline.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin XXX is therefore not allowed access. The response had HTTP status code 400.

This is the code that I am currently using:

var oauth_nonce = Convert.ToBase64String(new ASCIIEncoding().GetBytes(DateTime.Now.Ticks.ToString()));
var timeSpan = DateTime.UtcNow
    - new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc);
var oauth_timestamp = Convert.ToInt64(timeSpan.TotalSeconds).ToString();

function PostsTwitterCtrlAjax($scope, $http)
{
var url = “https://api.twitter.com/1.1/statuses/user_timeline.json”;

$http.get(url, {
    headers: {
        'Authorization':
            'OAuth oauth_consumer_key = "XXXXX",' +
            'oauth_signature_method="HMAC-SHA1",' +
            'oauth_timestamp="@oauth_timestamp",' +
            'oauth_nonce="@oauth_nonce",' +
            'oauth_version="1.0",' +
            'oauth_token="XXXXX",' +
            'oauth_signature="XXXXXXX"'
    }
}).then(function (data, status, headers, config)
        {
                 //$scope.posts = data.data; // response data
                 $scope.pics = data;
                 $scope.newarr = [];
                 for (var i = 0; i < $scope.pics.length ; i++) {

                         $scope.newarr.push($scope.pics[i]);
                    
                 }

                 $scope.posts = $scope.newarr;
        });

}

I am using the latest version of Umbraco 7.2.
Can you tell me where I am going wrong?


#2

The Twitter API does not return a Access-Control-Allow-Origin header, so it is not possible to request it directly from JavaScript using Ajax or similar. You need to have a backend, that kind of ‘proxies’ the requests to the API or so, in order to do so.


#3

Hi, Thanks for your reply. I have created a back end request that works and using ajax/webservice I can populate the data.
Thanks for your help,
Jon