Twitter API получает твиты - возвращает источник CORS заблокирован

0

Я пытаюсь получить твиты из хэштега. Я получаю следующий запрос об исключении Cross-Origin: одна и та же политика происхождения запрещает читать удаленный ресурс по адресу https://api.twitter.com/oauth2/token. (Причина: заголовок CORS "Access-Control-Allow-Origin" отсутствует). Запрос на перекрестный запрос заблокирован: политика одного и того же происхождения запрещает чтение удаленного ресурса по адресу https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd?get=%5Bobject+Object% 5D. (Причина: заголовок CORS 'Access-Control-Allow-Origin' отсутствует)

Ниже мой код: app.js

var app = angular.module('Twitter', ['ngResource']);

app.controller('TwitterCtrl', function($scope,$http,$resource){
// Create Base64 Object
    var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},
    decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

    var consumerKey = encodeURIComponent('');
    var consumerSecret = encodeURIComponent('');
    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'}});
    twitterOauthEndpoint.success(function (response) {
                // a successful response will return
                // the "bearer" token which is registered
                // to the $httpProvider
                console.log(twitterOauthEndpoint );
    app.$httpProvider.defaults.headers.common['Authorization'] = "Bearer " + response.access_token})
    .error(function (response) {
                  // error handling to some meaningful extent
                });
    $scope.twitter = $resource('https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd',
       // {action: 'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
        {get:{method:'JSONP'}});

    $scope.twitterResult = $scope.twitter.get();
});


app.config(function ($httpProvider) {
    app.$httpProvider = $httpProvider
});

html
<!doctype html>
<html ng-app="Twitter">
<head>
    <script  src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
    <script  src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

</head>
<body>
<div ng-controller="TwitterCtrl">
    <table class="table table-striped">
        <tr ng-repeat="tweet in twitterResult.results">
            <td>{{tweet.text}}</td>
        </tr>
    </table>
</div>
</body>
</html>

Я запускаю это на localhost: 8000, я следил за инструкциями твистеров, чтобы устранить эту проблему. Может ли кто-нибудь сообщить мне, если я ошибаюсь. Благодарю.

  • 0
    Вам нужно будет посмотреть заголовки в запросе и ответе PRE-FLIGHT. Я подозреваю, что им не хватает заголовка access-control-allow-headers. Этот конкретный заголовок необходим, когда вы устанавливаете и / или читаете нестандартные значения заголовка. Это серверный способ сообщить браузеру, чтобы междоменная страница видела собственный заголовок.
  • 0
    Остерегайтесь тестирования на локальном хосте с помощью CORS: stackoverflow.com/questions/10883211/…
Показать ещё 1 комментарий
Теги:
oauth-2.0
cors
twitter
twitter-oauth

1 ответ

2

Причина, по которой вы получаете эту ошибку, - это то, что вы делаете запрос через браузер. Браузеры не разрешают запросы на междоменные запросы, поскольку, как @allenru, упомянутые в комментариях ниже: Серверы должны отвечать в соответствии со спецификацией CORS, чтобы браузер мог продолжить запрос.

Вы можете узнать больше об этом здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Правильный способ получения твитов - это сделать звонок на сервер и получить для вас твиты.

Это также похоже на ошибочный вызов.
https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd?get=%5Bobject+Object%5D. Это не нормально иметь [object + object] в запросах. Это похоже на объект, который не был сжат.

Поделиться
  • 0
    Это неверно Браузер применяет протокол CORS и разрешает междоменные запросы.
  • 0
    @allenru Если пользователь отключает безопасность своего браузера, браузер будет нормально выполнять запросы CORS, но я не думаю, что он спрашивал, как переопределить безопасность браузера.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню