Access-Control-Allow-Origin denied spotify api [du

Question

This question already has an answer here:

• Ways to circumvent the same-origin policy 11 answers

I'm trying to access to the Spotify API token like so:

$.ajax({
  url: "https://accounts.spotify.com/api/token",
  type: 'POST',
  contentType: "application/json; charset=\"utf-8\"",
  crossDomain: true,
  data: {
    grant_type: "authorization_code",
    code: code,
    redirect_uri: "http://www.bancadigital.com.br/spotifyteste/callback.html"
  },
  processData: false,
  dataType: "json",
  headers: {
    Authorization: "Basic " + utf8_to_b64(key)
  },
  success: function( response ) {
    alert(response.access_token);
  },
});

but the service returns the following error:

XMLHttpRequest cannot load https://accounts.spotify.com/api/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.bancadigital.com.br' is therefore not allowed access.

Does anyone know how I can access the service?

Answer 1

The request to https://accounts.spotify.com/api/token needs to be made server side and not as an AJAX request.

This way your key, which contains the credentials for your application, won't be exposed. Also, the Spotify server will be able to redirect the request to the redirect_uri together with the access token.

An alternative is to use the implicit grant flow where you can run everything client side, but you will not get a refresh token.

I would recommend you to review the Spotify Web API Authorization Guide, check the GitHub repo with auth examples and take a look at the libraries and wrappers that make it easier to implement the OAuth flow.