如何在 angularjs 中传递 Twitter API 的授权标头以获取用户时间线

Question

我已经尝试过以下代码，但它正在返回XMLHttpRequest 无法加载 https://api.twitter.com/1.1/statuses/home_timeline.json?screen_name=twitterapi。请求的资源上不存在"访问控制允许源"标头。因此，不允许访问源"http://localhost:3000"。响应具有 HTTP 状态代码 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; 
});  });

Answer 1

由于 CORS 导致此错误

您正在使用$http.get进行跨域调用，您需要将其更改为$http.jsonp，并提供有效的Twitter API回调

    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; 
});  });