# Twitch.tv API challenge - cross origin issue

**URL:** <https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217>\
**Category:** General\
**Created:** [December 16, 2016, 8:39pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217 "2016-12-16T20:39:54Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![JSDesign](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdesign/32/164064_2.png) [@JSDesign](https://forum.freecodecamp.org/u/JSDesign)\
**Post date:** [December 16, 2016, 8:39pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/1 "2016-12-16T20:39:54Z")

</div>

using the suggested URL here [https://wind-bow.gomix.me/](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](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.
```

---

<div class="post-metadata">

**Author:** ![JohnIrle](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnirle/32/30050_2.png) [@JohnIrle](https://forum.freecodecamp.org/u/JohnIrle)\
**Post date:** [December 16, 2016, 8:57pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/2 "2016-12-16T20:57:37Z")

</div>

If you look at the API Read-me [Here](https://github.com/justintv/Twitch-API), there is a section about rate limits involving a client id. Are you using a client id in your code?

[Here](https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.c6zvi5vqm) 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.

---

<div class="post-metadata">

**Author:** ![JSDesign](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdesign/32/164064_2.png) [@JSDesign](https://forum.freecodecamp.org/u/JSDesign)\
**Post date:** [December 16, 2016, 9:04pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/3 "2016-12-16T21:04:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [December 16, 2016, 9:28pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/4 "2016-12-16T21:28:13Z")

</div>

I just checked, and this works:

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

```

---

<div class="post-metadata">

**Author:** ![JSDesign](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdesign/32/164064_2.png) [@JSDesign](https://forum.freecodecamp.org/u/JSDesign)\
**Post date:** [December 16, 2016, 9:48pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/5 "2016-12-16T21:48:06Z")

</div>

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);
}
```

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [December 16, 2016, 9:55pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/6 "2016-12-16T21:55:58Z")

</div>

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

> <https://stackoverflow.com/questions/6132796/how-to-make-a-jsonp-request-from-javascript-without-jquery>

---

<div class="post-metadata">

**Author:** ![JSDesign](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdesign/32/164064_2.png) [@JSDesign](https://forum.freecodecamp.org/u/JSDesign)\
**Post date:** [December 16, 2016, 9:59pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/7 "2016-12-16T21:59:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [December 16, 2016, 10:03pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/8 "2016-12-16T22:03:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JSDesign](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdesign/32/164064_2.png) [@JSDesign](https://forum.freecodecamp.org/u/JSDesign)\
**Post date:** [December 16, 2016, 10:12pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/9 "2016-12-16T22:12:19Z")

</div>

ok awesome. thanks for your help!

---

<div class="post-metadata">

**Author:** ![William-Charles](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/william-charles/32/78962_2.png) [@William-Charles](https://forum.freecodecamp.org/u/William-Charles)\
**Post date:** [December 18, 2016, 9:57pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/10 "2016-12-18T21:57:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Em-Ant](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/em-ant/32/29078_2.png) [@Em-Ant](https://forum.freecodecamp.org/u/Em-Ant)\
**Post date:** [December 19, 2016, 11:37pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/11 "2016-12-19T23:37:29Z")

</div>

The original Twitch API needs JSONP too.

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [December 20, 2016, 9:11am UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/12 "2016-12-20T09:11:34Z")

</div>

> **[Twitch request](https://codepen.io/jenovs/pen/ENMxJx?editors=0011)**
>
> ...

---

<div class="post-metadata">

**Author:** ![Em-Ant](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/em-ant/32/29078_2.png) [@Em-Ant](https://forum.freecodecamp.org/u/Em-Ant)\
**Post date:** [December 20, 2016, 1:59pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/13 "2016-12-20T13:59:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [December 20, 2016, 5:06pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/14 "2016-12-20T17:06:01Z")

</div>

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

> **[Twitch FCC](https://codepen.io/jenovs/pen/qqvNxB)**
>
> ...

---

<div class="post-metadata">

**Author:** ![Em-Ant](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/em-ant/32/29078_2.png) [@Em-Ant](https://forum.freecodecamp.org/u/Em-Ant)\
**Post date:** [December 20, 2016, 5:28pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/15 "2016-12-20T17:28:12Z")

</div>

@jenovs thanks 💟 👍  
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`.

---

<div class="post-metadata">

**Author:** ![JSDesign](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jsdesign/32/164064_2.png) [@JSDesign](https://forum.freecodecamp.org/u/JSDesign)\
**Post date:** [December 20, 2016, 8:23pm UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/16 "2016-12-20T20:23:18Z")

</div>

nice thanks for updating it 🙂

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 6:11am UTC](https://forum.freecodecamp.org/t/twitch-tv-api-challenge-cross-origin-issue/66217/17 "2021-01-16T06:11:01Z")

</div>