Twitch.tv API challenge - cross origin issue

1

using the suggested URL here https://wind-bow.gomix.me/ i’m getting a “No ‘Access-Control-Allow-Origin’ header” error. i tried the solution for jQuery users here https://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541 but i can’t get the suggested addition to the URL to work. same error when using a question mark or ampersand. i’m using pure JS. i’d rather not hardcode the JSON.

any suggestions?

XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/users/noobs2ninjas&callback=?.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://s.codepen.io' is therefore not allowed access.

XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/users/noobs2ninjas?callback=?.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://s.codepen.io' is therefore not allowed access.
3 Likes
2

If you look at the API Read-me Here, there is a section about rate limits involving a client id. Are you using a client id in your code?

Here is a blog post about the switch to client ids in their API.

You will probably have to post a link to your codepen or your code for more help.

3

i’m not using a client id. i took the wind-bow URL as a solution to that but it only solves the API key requirement?

4

I just checked, and this works:

$.getJSON('https://wind-bow.gomix.me/twitch-api/users/noobs2ninjas?callback=?', function (data) {
  console.log(data);
});
3 Likes
5

all right there must be something going on with my code then (JS, no jQuery)

var APIReq = new XMLHttpRequest();
var parsed;
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

APIReq.onreadystatechange = function() {
   if (APIReq.readyState === 4 && APIReq.status === 200) {
      parsed = JSON.parse(APIReq.responseText);
      console.log(parsed);
   }
};

for (var i = 0; i < users.length; i++) {
   APIReq.open('GET', 'https://wind-bow.gomix.me/twitch-api/users/' + users[i] + '?callback=?', true);
   APIReq.send(null);
}
6

Use jQuery.
If you don’t want to use jQuery, read this:

2 Likes
7

thanks. so JSONP is the solution to my cross origin issue?

1 Like
8

Yes.
If you want to do this challenge in JS you’ll have to get twitch API key and make request to the real twitch API

Or you can implement one of the solutions from that stack overflow link.

9

ok awesome. thanks for your help!

10

I was having the same problem. thank you for posting this question.

11

The original Twitch API needs JSONP too.

12
13

@jenovs You are right, thanks. It was the old version.
I enabled CORS on GET for https://wind-bow.gomix.me/. Would you help me testing it, when you have time ?

14

Created a quick mockup. Seems to work. Only getting sporadic 404 error, but I suppose it’s some kind of protection on the server?

15

@jenovs thanks :heart_decoration: :thumbsup:
The proxy has a rate limiter, needed to not exceed gomix capabilities. The 404 error are probably related to that.

@JSDesign now you can use JS XMLHttpRequest.

16

nice thanks for updating it :slight_smile: