Getting strated with Twitch api

Hi. I’m having problems getting data from the twitch api. I’m building an app that allows to get data about Twitch channels and games through a search engine. However I keep getting and error saying :

“XMLHttpRequest cannot load https://api.twitch.tv/kraken/channels/lirik. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘file://’ is therefore not allowed access.”

For now I’m just trying to get the information to the console.

Here’s what I have to inititialize the APi

    <script src="jquery-2.1.3.min.js"></script>
    <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
    <script>
        Twitch.init({clientId: '4lqupncds31igxdrqek4ln6m2lnuykk'}, function(error, status) {
            
    // the sdk is now loaded
        });$('.twitch-connect').click(function() {
            Twitch.login({
                scope: ['user_read', 'channel_read']
            });
        })

    </script>

Here’s the code that allows me to search:

//API docs: http://www.omdbapi.com
var base_url = "https://api.twitch.tv/kraken/channels/";
var index;
//array de filmes, não inicializado
var channels = [];


$(function() {

    $("#load").hide();
    $("#next, #previous").attr('disabled',true);

    $("#next").click(proximo);
    $("#previous").click(anterior);
    
    $("#search").click(procura);
});

function procura(){
    
    procurando();
    buscaFilmes();
}



function buscaFilmes(){

    var texto = $("#text").val();
    //var tipo = $("#type").val();
    //var ano = $("#year").val();
    
    var replaced = texto.split(' ').join('+');
    
    if(texto.length > 0){
        
        log("Procurar por filmes com '"+texto+"...");
        //1 pesquisa por filmes de acordo com texto, tipo e, se preenchido, com ano -- deve usar getJSON
        $.getJSON(base_url + texto, function(json) {

               //TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information

               if (json != "Nothing found."){

                  //Display the poster and a message announcing the result

                     $('#results').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].channels[0] + ' />');
                    
       
    } else {
        alert("Preencha o campo textual!");
    }
            });}
}

I keep searching channels names, for example: “https://api.twitch.tv/kraken/channels/lirik”, and i get the error described above.

Can someone help me. I dont know what I’m doing wrong…

Twitch’s API does not support CORS, you’ll need to use JSONP. You can use Twitch.api provided by the JS SDK that you seem to already be using, or keep using jQuery but set dataType: "jsonp".

1 Like

Yes . That was ir. Thank you :slight_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.