# CORS error on GET top games Twitch API

**URL:** <https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508>\
**Category:** API\
**Created:** [February 18, 2021, 7:24am UTC](https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508 "2021-02-18T07:24:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jiansun518](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/jiansun518/32/10870_2.png) [@jiansun518](https://discuss.dev.twitch.com/u/jiansun518)\
**Post date:** [February 18, 2021, 7:24am UTC](https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508/1 "2021-02-18T07:24:15Z")

</div>

Hi Twitch developers community,

I am building react app to display the top games by calling Twitch API. So far in [https://dev.twitch.tv/console](https://dev.twitch.tv/console)

1. I have registered my app in console given a name,
2. I have my redirect URL set to : [http://localhost](http://localhost)
3. I created my client secret

I am not using any server like Express.js, so there is no server-to-server use case here.  
My current goal is to simply using Axios to invoke twitch API like top-games: [https://api.twitch.tv/helix/games/top](https://api.twitch.tv/helix/games/top)  
and then render the payload on my dashboard

This is my code for creating Axio instance here:

```
    const api = axios.create({
       headers: {
         "client_id": "my client id",
         "client_secret": 'my client secret',
         "redirect_uri": 'http://localhost',
         "grant_type": "client_credentials"
  },
});

```

I am getting CORS error everytime when making the api call, the error message capture in console:

`Access to XMLHttpRequest at 'https://api.twitch.tv/helix/games/top' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field grant_type is not allowed by Access-Control-Allow-Headers in preflight response.`

What did I do wrong here ?Preformatted text

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [February 18, 2021, 11:36am UTC](https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508/2 "2021-02-18T11:36:57Z")

</div>

None of those headers you are sending are valid headers, which is why you’re getting an error that those headers are not allowed.

For making Helix API requests you need an OAuth token, and if you’re doing this from the client-side (as in, a browser) then you need to use the Implicit OAuth Flow [https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow) making sure to send those values as querystring params not headers.

Once you’ve got an access token, you can then make API requests. The Get Top Games example [https://dev.twitch.tv/docs/api/reference#get-top-games](https://dev.twitch.tv/docs/api/reference#get-top-games) shows what headers you should be sending, such as `Client-ID`, and `Authorization`.

---

<div class="post-metadata">

**Author:** ![jiansun518](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/jiansun518/32/10870_2.png) [@jiansun518](https://discuss.dev.twitch.com/u/jiansun518)\
**Post date:** [February 18, 2021, 10:05pm UTC](https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508/3 "2021-02-18T22:05:38Z")

</div>

@Dist  
Thanks for quick reply. Question does this mean it will be a two steps procedure for making API request to twitch API ?

1. make a call to [https://id.twitch.tv/oauth2/authorize](https://id.twitch.tv/oauth2/authorize) with required query parameter including  
client\_id, redirect\_uri, response\_type, scope ?

2. Then using the returned access token from 1st call to make the request I want ?

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [February 18, 2021, 10:09pm UTC](https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508/4 "2021-02-18T22:09:25Z")

</div>

For client-side requests you’ll use the Implicit auth flow, which means you need to actually send the user of your app there and if they approve your app they will be redirected back with an access token.

Once you have that access token you can make requests until that token expires, after which point you’ll need to send the user through the auth flow again.

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [March 20, 2021, 10:09pm UTC](https://discuss.dev.twitch.com/t/cors-error-on-get-top-games-twitch-api/30508/5 "2021-03-20T22:09:28Z")

</div>

Closed on March 20, 2021, 10:09pm UTC

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