# Client credentials grant flow API, CORS issue

**URL:** <https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508>\
**Category:** API\
**Created:** [October 27, 2022, 8:08pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508 "2022-10-27T20:08:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mohamed\_Lotfi](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mohamed_lotfi/32/19674_2.png) [@Mohamed\_Lotfi](https://discuss.dev.twitch.com/u/Mohamed_Lotfi)\
**Post date:** [October 27, 2022, 8:08pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/1 "2022-10-27T20:08:36Z")

</div>

I believe this issue has been discussed several times, but I cannot find the solution to my problem. I am using vue js and trying to get access token using the following post request:

```auto
let params ={
          client_id : this.twitchClientId,
          client_secret : this.twitchClientSecret,
          grant_type : "client_credentials"
        };

      axios.post('https://id.twitch.tv/oauth2/token', params, {
         headers: {
           Accept: 'application/vnd.twitchtv.v5+json'
         }
      }).then(async res =>{
      console.log("Token generated => " + res.data.access_token);
      this.twitchAccessToken = res.data.access_token;

        }).catch(err => {
        console.log("Twitch token err =>");
        console.log(err);
       });

```

This is the error I get:

```auto
Access to XMLHttpRequest at 'https://id.twitch.tv/oauth2/token' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field client-id is not allowed by Access-Control-Allow-Headers in preflight response.

```

How can I tackle this issue? Thanks in advance.

---

<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:** [October 27, 2022, 8:18pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/2 "2022-10-27T20:18:04Z")

</div>

Are you trying to do this all client-side? because you should not be using the Client Credentials flow client-side (eg, within a web page).

---

<div class="post-metadata">

**Author:** ![Mohamed\_Lotfi](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mohamed_lotfi/32/19674_2.png) [@Mohamed\_Lotfi](https://discuss.dev.twitch.com/u/Mohamed_Lotfi)\
**Post date:** [October 27, 2022, 8:23pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/3 "2022-10-27T20:23:35Z")

</div>

Yes. all from client side. Are you suggesting that I should get the token from the serve instead?

---

<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:** [October 27, 2022, 8:45pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/4 "2022-10-27T20:45:51Z")

</div>

Client Credentials (ie, App tokens) should only ever be used server-side or otherwise you’re exposing the client secret in the page.

If you want to get a token client-side you should use the Implicit flow [https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#implicit-grant-flow](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#implicit-grant-flow)

---

<div class="post-metadata">

**Author:** ![Mohamed\_Lotfi](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mohamed_lotfi/32/19674_2.png) [@Mohamed\_Lotfi](https://discuss.dev.twitch.com/u/Mohamed_Lotfi)\
**Post date:** [October 27, 2022, 8:58pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/5 "2022-10-27T20:58:04Z")

</div>

The only problem with that is that I do not want the users to do anything. I just need the token to call the helix API: [https://api.twitch.tv/helix/search/channels](https://api.twitch.tv/helix/search/channels)

Please let me know if there is another way to do that without using the Implicit flow.

---

<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:** [October 27, 2022, 9:19pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/6 "2022-10-27T21:19:22Z")

</div>

The only other way would be to make the requests on your server rather than client-side.

---

<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:** [November 26, 2022, 9:19pm UTC](https://discuss.dev.twitch.com/t/client-credentials-grant-flow-api-cors-issue/41508/7 "2022-11-26T21:19:40Z")

</div>

Closed on November 26, 2022, 9:19pm UTC

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