Empty data return by https://dev.twitch.tv/docs/api/reference#get-videos

API
1

Summary

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

I use the Implicit grant flow to auth my website

When request this https://api.twitch.tv/helix/videos route, 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 this route
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 can not works.

Only this https://api.twitch.tv/helix/videos route return an empty array while others (same api with different route) works fine, so seems 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

Does anyone know this issue or I am missing something?

same question at stackoverflow since this question will close in one month => javascript - Twitch API’s request data always empty on specific route and only on browser - Stack Overflow

2

It’s a weird/known issue floating around when trying to fetch videos client side using a Game ID. There is no fix that you can do if you need to remain Client Side

If the request is made from a server instead then works fine.

Thats for servers which doesn’t apply here as you are the client

That header is for the old/deprecated API so doesn’t appear here

Same deal since, it’s a server side/twitch issue.

Make your react front end call your react backend, then have the react back end use any kind of token (so app access token for example, then you don’t have to log the user in to your website whenever they visit your website just to see Twitch Content) and have the backend fetch and caceh data. Rather than the front end calling Twitch directly.

1 Like
3

Add a request header => accept-language: “” do work
like this

 'accept-language': ''

My request example

            await axios.get(`https://api.twitch.tv/helix/videos?game_id=${gameId}&first=5`,
                {
                    headers: {
                        Authorization: `Bearer ${accessToken}`,
                        "Client-Id": `${clientId}`,
                        'accept-language': ''
                    }
                });

thanks Igor Cavalcante’s help on stackOverFlow

4

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