How to pass authorization header for twitter api in angularjs for getting userstimeline?

Question

I have tried following code,but it is returning XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/home_timeline.json?screen_name=twitterapi. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.

    function randomString(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
            return result;
        }    var app=angular.module('store',[]);app.controller('indexController', function($scope, $http) {
var unixtime=Math.round((new Date()).getTime() / 1000.0),
 nonce=randomString(32,'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'); var httpMethod = 'GET',
url = 'https://api.twitter.com/1.1/statuses/home_timeline.json',
parameters = {
    oauth_consumer_key : 'AD6SEy1m3XkggNTuYw5SUl4dv',
    oauth_nonce : nonce,
    oauth_signature_method : 'HMAC-SHA1',
    oauth_timestamp : unixtime,
    oauth_token : '3131481153-I9k4ZvdnePO42lOH0EJQNQcAHoyim6XrFFzFk90',
    oauth_version : '1.0',
    screen_name:'twitterapi'
},
consumerSecret = 'xxxxxxx',
tokenSecret = 'xxxxxxx',

signature = oauthSignature.generate(httpMethod, url, parameters, consumerSecret, tokenSecret,
    { encodeSignature: true});
    $http.get(url, {
headers: {
    'Authorization':
        'OAuth oauth_consumer_key="AD6SEy1m3XkggNTuYw5SUl4dv",' +
        'oauth_signature_method="HMAC-SHA1",' +
        'oauth_timestamp='+unixtime +
        'oauth_nonce='+nonce +
        'oauth_version="1.0",' +
        'oauth_token="3131481153-I9k4ZvdnePO42lOH0EJQNQcAHoyim6XrFFzFk90",'+
        'oauth_signature='+signature
},
params:{screen_name:'twitterapi'}}).success(function (data) 
{ 
    $scope.tweets = data; 
});  });

ankit.json ankit.json · Accepted Answer · 2015-04-15T07:02:22

You are getting this error due to CORS

you are making a cross domain call with $http.get, you need to change it to $http.jsonp and also provide a valid twitter api callback

    function randomString(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
            return result;
        }    var app=angular.module('store',[]);app.controller('indexController', function($scope, $http) {
var unixtime=Math.round((new Date()).getTime() / 1000.0),
 nonce=randomString(32,'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'); var httpMethod = 'GET',
url = 'https://api.twitter.com/1.1/statuses/home_timeline.json',
parameters = {
    oauth_consumer_key : 'AD6SEy1m3XkggNTuYw5SUl4dv',
    oauth_nonce : nonce,
    oauth_signature_method : 'HMAC-SHA1',
    oauth_timestamp : unixtime,
    oauth_token : '3131481153-I9k4ZvdnePO42lOH0EJQNQcAHoyim6XrFFzFk90',
    oauth_version : '1.0',
    screen_name:'twitterapi',
    callback: 'twitterCallback'
},
consumerSecret = 'xxxxxxx',
tokenSecret = 'xxxxxxx',

signature = oauthSignature.generate(httpMethod, url, parameters, consumerSecret, tokenSecret,
    { encodeSignature: true});
    $http.jsonp(url, {
headers: {
    'Authorization':
        'OAuth oauth_consumer_key="AD6SEy1m3XkggNTuYw5SUl4dv",' +
        'oauth_signature_method="HMAC-SHA1",' +
        'oauth_timestamp='+unixtime +
        'oauth_nonce='+nonce +
        'oauth_version="1.0",' +
        'oauth_token="3131481153-I9k4ZvdnePO42lOH0EJQNQcAHoyim6XrFFzFk90",'+
        'oauth_signature='+signature
},
params:{screen_name:'twitterapi'}}).success(function (data) 
{ 
    $scope.tweets = data; 
});  });

How to pass authorization header for twitter api in angularjs for getting userstimeline?

1 Answers