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


1 answer


Make a request with

$http.jsonp('https://api.twitch.tv/kraken/games/top?limit=' + number + '&callback=JSON_CALLBACK')

      



This will return json for you and you will have no problem with XMLHttpRequest

+4


source







All Articles