javascript: MIME-Typ ('text/html') ist nicht ausführbar, und strikte MIME-Typ-Prüfung ist aktiviert

Question

Ich versuche, eine einfache Aufforderung Autorisierungsanforderung an die Spotify API zu machen. Wenn ich einen GET HTTPRequest mache, bekomme ich einen Domain-übergreifenden Fehler. Daher mache ich eine JSONP-Anfrage mit einem Callback, aber das führt zu einem MIME-Typ-Fehler, wie oben gezeigt, dessen Workaround ich gefunden habe, wieder eine HTTPRequest JSON-Anfrage zu machen, die dem MIME-Typ entspricht. Ziemlich festgefahren bin ich hier! Bitte helfen Sie! Dank

Das ist mein js Codeblock:

(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

Ihr Problem scheint, dass Sie einen <script> Tag verwenden zu sein, etwas zu laden, die eine HTML-Seite ist. Das ist meine vorgeschlagene Lösung:

1. Wenn der Benutzer authentifizieren muss, leiten sie:

   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 
       ""; 
   

   Beachten Sie, wenn Sie beim Laden der Seite umleiten gehen, verwenden location.replace(...) statt location.href = .... Auf diese Weise hat der Benutzer nicht die direkt umleitende Seite in seinem Back-Button-Verlauf.

2. Dann wird in der URL in THE_URI_TO_REDIRECT_TO, analysieren den Hash:
   Spotify macht einen Hash wie folgt aus: #access_token=...&expiry=.... location.hash gibt diesen Hash zurück, einschließlich der führenden #. Zuerst stellen wir unser Ziel auf, die die Optionen halten:

   var hash = {}; 
   

   dann entfernen wir die #:

   var h = location.hash.slice(1) 
   

   ... und Split auf den & s.

   h = h.split('&') 
   

   Als nächstes iterieren wir über alle Paare (forEach) und setzen Sie die beiden Stücke in der hash Objekt (dh hash['access_token'] = '...';

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

3. Danach können Sie die Daten lesen.

   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