No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Klerith]

Hi, I'm trying to get the Token to do some api calls to the API, but I can't pass the "Access-Control-Allow-Origin" issue.

If I enable a Chrome plugins, all works fine, but if I turn it off, I get that error, by the way, I upload a demo to another website instead of localhost, but I got same error

I'm using Angular 2 and here's my call:

let headers = new Headers();
         headers.append('Content-Type', 'application/x-www-form-urlencoded');
         headers.append("cache-control", "no-cache");

        let body = new URLSearchParams();
        body.append('grant_type','client_credentials');
        body.append('client_id','XXXX');
        body.append('client_secret','XXXX');

        console.log( body.toString() ); // some check

        this.http.post( this.urlToken, body.toString() , { headers } )
              .subscribe( data=>{
                console.log(data);
          });

And this is the full error

XMLHttpRequest cannot load https://accounts.spotify.com/api/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Endpoint(s):

All endpoints works with the token, but this is my only issue, get this token dynamically

Expected behaviour:

Get the access_token, token type and expires in.

I will appreciate any help, thank you

[hughrawlinson]

Hi @Klerith - the client credentials flow is not intended for calls directly from browsers as it exposes the client secret in plaintext. The same is true for the authorization code flow; both the client credentials and authorization code flows require the client secret, and as that must remain secret, the CORS restrictions prevent them from being called directly from browsers. If you need to auth from a browser without a backend, you should use the implicit grant flow. Otherwise, I'd recommend implementing client credentials on a backend and proxying the requests to your browser, using your preferred method of client-server authentication to prevent unauthorized use of your server.

[Klerith]

I understand @hughrawlinson , I will create a backend then... thank you.