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