javascript: MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Question

I am trying to make a simple get authorization request to the Spotify Api. If i make a GET HTTPRequest then i get a cross-domain error. Hence I making a JSONP request using a callback, but this leads to a MIME type error as shown above, whose workaround i have found is to again make an HTTPRequest JSON request to match the MIME type. Quite a deadlock I am in here ! Please help! Thanks

This is my js code block:

(function(){
    var script = document.createElement('script');
    script.src = 'https://accounts.spotify.com/authorize?client_id=CLIENT_ID&response_type=code&redirect_uri=https://samcasm.github.io/moodsetNow/moodset.html&scope=user-read-private%20user-read-email&state=34fFs29kd09?callback=mySpotify';
    document.getElementsByTagName('body')[0].appendChild(script);
})();

function mySpotify(){
console.log(response);
}

Answer 1

Your problem seems to be that you're using a <script> tag to load something that's an HTML page. This is my suggested solution:

1. When the user needs to authenticate, redirect them:

    location.href = "https://accounts.spotify.com/authorize" + "?client_id=" + CLIENT_ID + "&response_type=token" + "&redirect_uri=" + encodeURIComponent(THE_URI_TO_REDIRECT_TO) + "&state=" + STATE + // optional "&scope=" + SCOPES.join(" ") + // optional ""; 

   Note that if you're going to redirect on page load, use location.replace(...) instead of location.href = ... . This way, the user will not have the immediately-redirecting page in their back button history.

2. Then, at the URL in THE_URI_TO_REDIRECT_TO , parse the hash:
   Spotify makes a hash like this: #access_token=...&expiry=... . location.hash returns that hash, including the leading # . First, we set up our object that will hold the options:

    var hash = {}; 

   then, we remove the # :

    var h = location.hash.slice(1) 

   … and split on the & s.

    h = h.split('&') 

   Next, we iterate over all of the pairs ( forEach ) and put the two pieces in the hash object (ie hash['access_token'] = '...';

    h.forEach(function(pair) { pair = pair.split('='); hash[pair.shift()] = pair.join('='); }); 

3. After that, you can read the data.

    if (hash.error) { console.log(hash.error); } else { var token = hash.access_token; hash.token_type === "Bearer"; var expiry = new Date(); expiry.setSeconds(expiry.getSeconds() + (+hash.expires_in)); } var state = hash.state; // optional