Use the Twitchtv JSON API with fetch() problems

I had this project working before, but checking on it there seems to be issues. I wrote the project using VanillaJS and the fetch API.

If I set the mode = no-cors then I get a response with a status = 0. The code then ends up throwing an error Uncaught (in promise) SyntaxError: Unexpected end of JSON input.

Removing the mode option from my fetch request ends up with the following error:
Fetch API cannot load https://wind-bow.gomix.me/twitch-api/channels/storbeck/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Does anyone know how I can tell the fetch request to skip/ignore the preflight? It seems like the Twitch API Pass Through won’t respond to an OPTIONS request.

Thanks for any help.

Did you find a solution? It seems like mine broke as well:

No I didn’t get around to fixing this project. I honestly think the server needs to be updated so that it will respond to a OPTIONS request.

I fixed mine by changing gomix.me to glitch.me.

2 Likes

Thanks. I now have something running in my CodePen.

How did U fix this?

https://wind-bow.glitch.me/twitch-api/users/freecodecamp
Runs in the browser.

This does not:

  fetch(`https://wind-bow.gomix.me/twitch-api/users/freecodecamp`,{
headers: new Headers({
    'Content-Type': 'application/json'
  })
    })
    .then(blob => blob.json ())
    .then(data => console.log(data))

I also tried adding ?callback etc in the string. Still nothing. What the?

Do you have your console open to see the errors? I’m see a lot of errors that have “Preflight response is not successful” This is usually a CORS issue. They are hard to fix if you don’t have control over the API server.

I didn’t have the anything in my header object and seem to be working. Get rid of the Content-Type header and go from there.

Looks like I was able to get this all answered over in another thread. Not that you need this, but just in case someone else runs into problems. Help getting fetch to work with wind-bow API