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

[a020422926797]

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

And the other routes are works fine.
like this route
https://api.twitch.tv/helix/games/top

or this route
https://api.twitch.tv/helix/videos

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

Also used the C# NET6 ConsoleApp to test on my windows 11

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

[BarryCarlyon]

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.

@a020422926797

Had tried this CORS - Wrong ‘Access-Control-Allow-Origin’ header

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

@a020422926797

add a request header 'accept': 'application/vnd.twitchtv.v5+json'

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

@a020422926797

renew my twitch developer console’s clientId.

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

@a020422926797

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

I use the Implicit grant flow to auth my website

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.

[a020422926797]

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