Twitter API获取推文-返回被阻止的CORS源
[英]Twitter API get tweets - returns CORS origin blocked
问题描述
I am trying to get tweets from a hashtag. 
我正在尝试从主题标签获取推文。 I get following erros Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.twitter.com/oauth2/token . 我收到以下错误跨域请求被阻止的消息：“同源源策略”不允许读取https://api.twitter.com/oauth2/token上的远程资源。 (Reason: CORS header 'Access-Control-Allow-Origin' missing). （原因：CORS标头“ Access-Control-Allow-Origin”缺失）。 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd?get=%5Bobject+Object%5D . 跨域请求被阻止：“相同来源策略”不允许在https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd?get=%5Bobject+Object%读取远程资源5D 。 (Reason: CORS header 'Access-Control-Allow-Origin' missing) （原因：CORS标头“ Access-Control-Allow-Origin”缺失）
Below is my code: app.js 下面是我的代码：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>
I am running this on localhost:8000, I followed twisters instructions to troubleshoot this. 我在localhost：8000上运行此程序，我按照扭曲程序的说明进行了故障排除。 Can someone let me know, if I am making any mistake. 如果我有任何错误，可以让我知道。 thanks. 谢谢。
1 个解决方案
解决方案1
2 2015-11-29 02:57:41
The reason why you are getting this error is because your making the request through the browser. 出现此错误的原因是因为您是通过浏览器发出请求的。 Browsers don't allow cross domain requests because like @allenru mentioned in the comments below: Servers need to response according to the CORS spec so the browser can proceed with the request. 浏览器不允许跨域请求，因为像在下面的注释中提到的@allenru一样：服务器需要根据CORS规范进行响应，以便浏览器可以继续进行请求。
You can learn more about it here : https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 您可以在此处了解更多信息： https : //developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
The proper way to fetch tweets would be making a call to the server and have the server fetch tweets for you. 提取推文的正确方法是致电服务器，并让服务器为您提取推文。
This also seems like a buggy call. 这似乎也有错误。
https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd?get=%5Bobject+Object%5D . https://api.twitter.com/1.1/search/tweets.json?f=tweets&q=%23shruthirajoli&src=typd?get=%5Bobject+Object%5D 。 Its not normal to have [object + object] in requests. 在请求中包含[object + object]是不正常的。 It seems like an object that was not stringified. 似乎没有对它进行字符串化处理。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.