javascriptreactjsoauth-2.0twitchtwitch-api

Twitch API's request data always empty on specific route and only on browser

Summary

I am building a website(react app) integrated with twitch helix api.

I use the Implicit grant flow to auth my website

When request this https://api.twitch.tv/helix/videos route with game_id query param, it will always return an empty array

a picture from edge browser's network and console I printed enter image description here enter image description here

And the other routes are works fine.
like this route https://api.twitch.tv/helix/games/top enter image description here or same route with id query param https://api.twitch.tv/helix/videos enter image description here

BUT I use the api tester like Thunder Client for VS Code.
The https://api.twitch.tv/helix/videos works fine enter image description here

Also used the C# NET6 ConsoleApp to test on my windows 11 enter image description here

Found that this https://api.twitch.tv/helix/videos route only works on server side, the client side could not works.

Only this https://api.twitch.tv/helix/videos route with game_id query param return an empty array while others (same api with different route or same route with other query param) works fine, it seems this is not a CORS error

Tried Solution

Had tried this CORS - Wrong ‘Access-Control-Allow-Origin’ header on twitch developer forums to add a request header 'accept': 'application/vnd.twitchtv.v5+json', or renew my twitch developer console's clientId.
But still didn't work

My website on vercel

Does anyone know this issue or I am missing something?

Solution

  • Try set language request header to a empty string:

    headers.set('accept-language', '')

    It worked for me.