Get Oauth token by jQuery AJAX - blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

API
1

Hello there ! :slight_smile:

I’m trying to get an Oauth token via my web application, and for that I use jQuery.

So I do a simple AJAX call like so :

$.ajax({
        url: 'https://id.twitch.tv/oauth2/authorize?response_type=code&client_id=[my-client-id]&redirect_uri=http://localhost&scope=chat:edit+chat:read)',
    }).done(function(res) {
        console.log(res)
    });

But I have a JS error and this one said that the request is blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

So I have tried plenty of solutions to solve that problem on my web application, but this error is still there.

I’m just wondering if this error comes from the response of the Twitch API which doesn’t send the proprer CORS headers, or if the Twitch API is blocking my request for some reason.

Any idea of the problem ?

Thank you very much ! :smiley:

2

The first step of oAuth is to redirect the user to Twitch.

Not a Ajax call to fetch this URL.

You are doing step 1 wrong

1 Like
3

Ah okay that’s what I was thinking after a while, that this is not possible at all.
Thank you very much for your help ! :slight_smile:

4

Not sure what you mean not possible

Step 1 - Redirect to Twitch
Step 2 - user accepts (or delcines) the account/clientID Link
Step 3 - under regular/code auth they come back to your redirecURL with a ?code
Step 4 - exchange the code for a token.

But if you are doing this in a pure JS environment then you use implict auth

Like this example Twitch Implicit Auth Example

Step 1 - Redirect to Twitch
Step 2 - user accepts (or delcines) the account/clientID Link
Step 3 - users comes back to your site with a #access_token

1 Like
5

Okay, I don’t know if I have to make an other post for my question but I’m wondering if pick the right flow for the access token.

My goal is to have my own twitch application (a web application that is connected to twitch) on my local computer, and which can read and send messages to my stream, manage this one and also get my follower list. All of this is managed with JavaScript.

I choose to get a Authorization code grant flow, but maybe I had to get this one with Implicit grant flow ?

Yeah I’m lost to which one I have to use… :thinking:

6

For a personal application/project any of the oAuth flows work.

Generally for what you describe you should be using “regular”/(code) oAuth which provides a access and refresh tokens. Then when the access token dies use the refresh token to get a new access token.

For this requries a “server application”/server code since the calls should be blocked on CORS. To prevent leaking of a ClientSecret.

So

Any works you jsut need to write the code to go with it

For the quick start you can use the TwitchCLI to generate a token then copy/paste the token to your app from what the CLI generates

1 Like
7

Thank you very much, I think the twitch CLI will be a good start.

But I’m afraid for the futur, because I know that for the follower list, I will have to make some ajax call to twitch, and maybe those call wil get the same problems with CORS.

And for what you said, my application is hosted on a local server which is Laragon (similar to WAMP/XAMP), and it work with the PHP Framework Laravel, so for that I think I’m good.

So in a local server, will it work with the CORS ? In my memories, I have made a previous application with the same configuration (Laragon with Laravel) which was connected to Twitch, and I had no problem with the CORS. Maybe the security has been updated since this time.

8

No it’s jsut the oAuth steps that have issues.

Since step 1 is “link a user to a client ID” and that requires a web browser

CORS doens’t apply to server to server calls.

1 Like
9

Okay thank you very much for your patience and your help, I know that I post a lot of post (before I did post like maybe 4 haha), but it really helps, so thank you very much ! :smiley:

10

Just a quick update, I get the token from the twitch CLI and it work very well, I can access to my follower list with an ajax call without any CORS issues.

But just a last question : I didn’t mentionned any scope to get the code, does it mean that every scope are applied to this code ?

Thank you for your answer :slight_smile:

11

Only the scopes you specify are requested when the user goes through the OAuth process to accept those permissions. If you don’t specify any scopes, the token wont have any.

1 Like
12

All right thank you very much for this answer ! :smiley:

13

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