Token request CORS error

Hi,
in an Angular webapp we would to permit the user to upload 3D models on Sketchfab.
We implemented the Oauth2 login as described in Schetchfab Oauth2 guide about the grant type Authorization Code.

We take the AUTHORIZATION_CODE with the link and then we try to retrieve the token with this method:

getSkToken(skData): Observable {
let headers = new HttpHeaders({
‘content-type’: ‘application/x-www-form-urlencoded’
});

const options = { headers };
const serviceName = 'https://sketchfab.com/oauth2/token/';

return from(this.http.post(serviceName, skData, options).pipe(
    map(data => {
      return data;
    },
      error => {
        console.log(error);
      })
  ));

}

where skData are the correct values requested:

-‘grant_type’: ‘authorization_code’ -'code': [AUTHORIZATION_CODE]
-‘client_id’: [CLIENT_ID] -'client_secret': [CLIENT_SECRET]
-‘redirect_uri’: [REDIRECT_URI]`

We have this CORS error:

Access to XMLHttpRequest at ‘https://sketchfab.com/oauth2/token/’ from origin ‘https://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

We tried to change the POST header in many ways, like:

let headers = new HttpHeaders({
‘content-type’: ‘application/x-www-form-urlencoded’,
‘Access-Control-Allow-Headers’: ‘Content-Type’,
‘Access-Control-Allow-Methods’: ‘POST’,
‘Access-Control-Allow-Origin’: ‘*’
});

But always CORS error.

Some idea?

Thank you!

Hi,

We’re looking in to this but it’s not immediately obvious what’s going wrong here.

Hey there,

The process / code you describe sounds right. Our oauth endpoint isn’t reporting any issues currently so my best suggestion would be to tinker with your http client. Maybe the lib you’re using tries to send wrong CORS headers, or some other http issue. We’ve seen this happen with e.g. axios users. Some network inspection tool could help as well, to make sure the actual request is well formed.

Hopefuly this helps a bit !

Cheers,

Hey !

Looking through your issue again, I just realised another key points : this request should never be made on the client-side because it must contain the client_secret. Which means, the client_secret has to be in your JS bundle for your code to work, meaning it is publicly accessible. This call should only be made on the node side, where CORS is not a concern. For client-only apps there are other authentication flow that can help (such as implicit).

Hope this helps.