CORS issue in Patreon API [SOLVED]

Friendly Help
1

I have configured the Patreon App and set ‘http://localhost:3000/oauth/redirect http://localhost:3000/oauth/token’ as redirect uri. When I tried to fetch the user token and user data using the patreonAPI , I’m getting the following error

" No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http:// localhost:3000’ is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled."

Can anyone help me on this.

2

Are you trying to make an API call with client-side Javascript?

3

yes. I’m using React. Here is my code

patreonOAuthClient
        .getTokens(oauthGrantCode, redirectURL)
        .then(tokensResponse => {
            const patreonAPIClient = patreonAPI(tokensResponse.access_token)
            return patreonAPIClient('/current_user')
        })
        .then(({ store }) => {
            // store is a [JsonApiDataStore](https://github.com/beauby/jsonapi-datastore)
            // You can also ask for result.rawJson if you'd like to work with unparsed data
            response.end(store.findAll('user').map(user => user.serialize()))
        })
        .catch(err => {
            console.error('error!', err)
            response.end(err)
        })
4

I wouldn’t recommend using client side javascript to access the API directly. It exposes your client ID and secret to anyone savvy enough to muddle through your js files.

Better practice is to use the API server side, and then serve the data to your client.

You can read up on CORS here:
https://enable-cors.org/

But the gist of it is that client side javascript will prevent you from pulling data from another origin unless an “Access-Control-Allow-Origin” header is set on the target page, which it doesn’t seem to be.

If you pull the data server side, you can set the header yourself so you can pull it from another origin. (But that doesn’t really matter if your client is on the same domain, since there is no cross-origin in that case).

Additionally, I’m not sure you can use “http://localhost” as a redirect API. At least, I never managed to get it to work. Can anyone else confirm or deny this?

5

We intentionally not support client side requests for security reasons.
We will allow that once we implement client tokens which have a different OAuth flow and will allow some interesting features with it. Sadly, we currently do not support it.

Additionally, I’m not sure you can use “http://localhost” as a redirect API. At least, I never managed to get it to work. Can anyone else confirm or deny this?

That is completely valid and is most of the times used for debugging purposes. Using it as your production redirect uri will fail to work.

2 Likes
6

I have used localhost while I was testing my (REST, not socket) Patreon API integration, but I did use a non-standard port (5000).

2 Likes