javascript: MIME 类型 ('text/html' ) 不可执行，并且启用了严格的 MIME 类型检查

Question

我正在尝试向 Spotify Api 发出简单的获取授权请求。如果我发出 GET HTTPRequest 那么我会收到跨域错误。因此，我使用回调发出 JSONP 请求，但这会导致 MIME 类型错误，如上所示，我找到的解决方法是再次发出 HTTPRequest JSON 请求以匹配 MIME 类型。我在这里陷入了僵局!请帮忙!谢谢

这是我的js代码块:

(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

您的问题似乎是您正在使用 <script>标签来加载 HTML 页面的内容。这是我建议的解决方案:

1. 当用户需要身份验证时，重定向他们:

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

   请注意，如果您要在页面加载时重定向，请使用 location.replace(...)而不是location.href = ... 。这样，用户的后退按钮历史记录中就不会出现立即重定向页面。

2. 然后，在 THE_URI_TO_REDIRECT_TO 中的 URL ，解析哈希:
   Spotify 生成这样的哈希值:#access_token=...&expiry=... 。 location.hash返回该哈希值，包括前导 # 。首先，我们设置保存选项的对象:

   var hash = {};
   

   然后，我们删除 # :

   var h = location.hash.slice(1)
   

   ...并在 & 上拆分s。

   h = h.split('&')
   

   接下来，我们迭代所有对 ( forEach ) 并将这两部分放入 hash 中对象(即 hash['access_token'] = '...';

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

3. 之后就可以读取数据了。

   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