客户端凭据流适用于 curl 但不适用于浏览器

Question

我正在开发一个 Spotify 应用程序，我想获得令牌。

我正在关注 Client Credentials Flow 并使用 curl 一切正常：

$ curl -H "Authorization: Basic YjU4Y...llYTQ=" \
-d grant_type=client_credentials \
https://accounts.spotify.com/api/token
# Response:
# {
#   "access_token":"BQD3u...W4iJA",
#   "token_type":"Bearer",
#   "expires_in":3600
# }

这里是我的 HTML 文件的 Javascript 代码，我尝试在其中获得相同的结果：

var url = "https://accounts.spotify.com/api/token";
var authentication = "YjU4Y...llYTQ=";
var params = { grant_type: "client_credentials" };
var auth = "Basic " + authentication;

$.ajax({
  url: url,
  type: 'POST',
  dataType: 'json',
  headers: {
      'Authorization' : auth,
      'Access-Control-Allow-Origin': '*'
  },
  data: params,
  success: function(data) {
      console.log('success', data);
  }
});

但是，我收到以下错误：

XMLHttpRequest 无法加载 https://accounts.spotify.com/api/token。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'null'。

我做错了什么？

真的有办法使用 Javascript 从静态 HTML 文件中使用 Spotify API 吗？

Answer 1

什么都没有。浏览器不允许 CORS，除非服务器特别授权。在您的情况下，您无法控制服务器，因此您只有一个选择 - 破解浏览器。使用 Firefox 和 Chrome 的插件轻松完成。为 Firefox 搜索 CORS Everywhere。 chrome也有一个叫做访问控制允许*，或者类似的东西。

相信我...我花了一周时间尝试不同的 REST api。试过js fetch等。你必须用插件破解浏览器。