AngularJS cross-domain requests using $ http service
I'm trying to learn AngularJS by building a simple web app using the Twitch API ( https://github.com/justintv/Twitch-API ), but I'm having trouble making a GET request since it is a cross-domain request. This is what I have tried
angular.module('streamPlaylisterAppServices', []).factory('twitchService', ['$http',
function($http) {
return function(usercode){
console.log("usercode inside service is: " + usercode)
var authHeader = 'OAuth' + usercode;
return $http({
method: 'GET',
url: ' https://api.twitch.tv/kraken',
cache: false,
headers:{
'Accept': 'application/vnd.twitchtv.v3+json',
'Authorization': 'OAuth ' + usercode
}
})
};
}]);
but I am getting this for the error:
XMLHttpRequest cannot load https://api.twitch.tv/kraken . The request was redirected to http://www.twitch.tv/kraken ', which is not allowed for cross-origin requests requiring preflight protection.
I know I need to use a JSONP request, but how do I configure the headers this way? Can anyone show me an example JSONP request and how to set headers for it like in the example above? If I can't set the headers in JSONP requests, how else can I set the request headers?
+3
source to share