Sunday, 7 May 2017

Spotify API - "Can't Set Headers After They Are Sent" on Hosted Site But Not Localhost

I'm getting a "can't set headers after they are sent" error when attempting to get a user's basic info from the Spotify API. I'm only getting the error on my hosted site, not on localhost.

I'm using Spotify's "Implicit Grant" authorization flow, described here: https://developer.spotify.com/web-api/authorization-guide/#implicit-grant-flow

Why would I get this error on the live site, but not on localhost?

Here is the html:

<div class="container">
  <div id="login">
    <h1>This is an example of the Implicit Grant flow</h1>
    <button id="login-button" class="btn btn-primary">Log in with Spotify</button>
  </div>
  <div id="loggedin">
    <div id="user-profile">
    </div>
    <div id="oauth">
    </div>
  </div>
</div>

<script id="user-profile-template" type="text/x-handlebars-template">
  <h1>Logged in as </h1>
  <div class="media">
    <div class="pull-left">
      <img class="media-object" width="150" src="" />
    </div>
    <div class="media-body">
      <dl class="dl-horizontal">
        <dt>Display name</dt><dd class="clearfix"></dd>
        <dt>Id</dt><dd></dd>
        <dt>Email</dt><dd></dd>
        <dt>Spotify URI</dt><dd><a href=""></a></dd>
        <dt>Link</dt><dd><a href=""></a></dd>
        <dt>Profile Image</dt><dd class="clearfix"><a href=""></a></dd>
        <dt>Country</dt><dd></dd>
      </dl>
    </div>
  </div>
</script>

<script id="oauth-template" type="text/x-handlebars-template">
  <h2>oAuth info</h2>
  <dl class="dl-horizontal">
    <dt>Access token</dt><dd class="text-overflow"></dd>
  </dl>
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
  (function() {

    var stateKey = 'spotify_auth_state';

    /**
     * Obtains parameters from the hash of the URL
     * @return Object
     */
    function getHashParams() {
      var hashParams = {};
      var e, r = /([^&;=]+)=?([^&;]*)/g,
          q = window.location.hash.substring(1);
      while ( e = r.exec(q)) {
         hashParams[e[1]] = decodeURIComponent(e[2]);
      }
      return hashParams;
    }

    /**
     * Generates a random string containing numbers and letters
     * @param  {number} length The length of the string
     * @return {string} The generated string
     */
    function generateRandomString(length) {
      var text = '';
      var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

      for (var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      return text;
    };

    var userProfileSource = document.getElementById('user-profile-template').innerHTML,
        userProfileTemplate = Handlebars.compile(userProfileSource),
        userProfilePlaceholder = document.getElementById('user-profile');

        oauthSource = document.getElementById('oauth-template').innerHTML,
        oauthTemplate = Handlebars.compile(oauthSource),
        oauthPlaceholder = document.getElementById('oauth');

    var params = getHashParams();

    var access_token = params.access_token,
        state = params.state,
        storedState = localStorage.getItem(stateKey);

    if (access_token && (state == null || state !== storedState)) {
      alert('There was an error during the authentication');
    } else {
      localStorage.removeItem(stateKey);
      if (access_token) {
        $.ajax({
            url: 'https://api.spotify.com/v1/me',
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              userProfilePlaceholder.innerHTML = userProfileTemplate(response);

              $('#login').hide();
              $('#loggedin').show();
            }
        });
      } else {
          $('#login').show();
          $('#loggedin').hide();
      }

      document.getElementById('login-button').addEventListener('click', function() {

        var client_id = 'bc80436ad194471c8a791c060649ecf9'; // Your client id
        var redirect_uri = 'https://myapp.herokuapp.com/add-bands'; // Your redirect uri

        var state = generateRandomString(16);

        localStorage.setItem(stateKey, state);
        var scope = 'user-read-private user-read-email';

        var url = 'https://accounts.spotify.com/authorize';
        url += '?response_type=token';
        url += '&client_id=' + encodeURIComponent(client_id);
        url += '&scope=' + encodeURIComponent(scope);
        url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
        url += '&state=' + encodeURIComponent(state);

        window.location = url;
      }, false);
    }
  })();
</script>



via Jake 1986

No comments:

Post a Comment