api /令牌授权上的Spotify API错误请求错误：400

Question

我正在尝试使用Spotify API文档页面上的客户端凭据流来授权Spotify API请求。 这是我使用fetch API的javascript ES6格式的代码

    const response = await fetch('https://accounts.spotify.com/api/token', {
    mode: 'no-cors',
    method: 'POST',
    headers: {
      'Authorization': 'Basic Yzg4OWYzMjM5MjI0NGM4MGIyMzIyOTI5ODQ2ZjZmZWQ6MmUzZTM2YTMzMTM5NDM1Mzk3NzM4ZDMxMTg4MzM0Mjc=',
      'Content-type': 'application/x-www-form-urlencoded'
      },
    body: 'grant_type=client_credentials'
});

控制台说这是一个错误的请求，并且不返回任何JSON。

令我真正困惑的另一件事是，当我使用带有这些标头和正文的POSTMAN发送请求时，它恰好返回了我想要的内容（它可以正常工作），我看不出这与我正在做的事情有何不同... ？ 谁能帮忙吗？

如果有帮助，这也是Java jQuery Ajax中邮递员的代码：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://accounts.spotify.com/api/token",
  "method": "POST",
  "headers": {
    "Authorization": "Basic Yzg4OWYzMjM5MjI0NGM4MGIyMzIyOTI5ODQ2ZjZmZWQ6MmUzZTM2YTMzMTM5NDM1Mzk3NzM4ZDMxMTg4MzM0Mjc=",
    "Content-Type": "application/x-www-form-urlencoded",
    "Cache-Control": "no-cache",
    "Postman-Token": "2f93918d-2e8e-4fb0-a168-7e153dd83912"
  },
  "data": {
    "grant_type": "client_credentials"
  }
}  

$.ajax(settings).done(function (response) {
  console.log(response);
});

这就是在DevTools中的要求

Answer 1

该特定端点并不意味着要在客户端使用。 您应该在某些服务器端脚本中使用它。

https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow

客户端凭据流用于服务器到服务器的身份验证

另一个暗示它仅是服务器端的提示是，它使用您的客户机密作为其名称，这意味着它应该保持机密，并且使其在客户端上可见不是很秘密。

因此，您可以从该端点获取访问令牌，然后可以在客户端上使用该访问令牌向其他api端点（例如https://api.spotify.com/v1/tracks发出请求

现在，为什么它在您的通话中不起作用。 它可以在邮递员中工作，因为它忽略了CORS，并且可以正确发送授权标头。 但是，在浏览器中，将fetch()请求模式设置为no-cors 。 在这种模式下，只能发送某些标头，而javascript无法读取返回的响应。

因此，您的请求不会发送授权标头，因为它不是无芯模式下允许的简单标头之一。 因此，您的请求失败。 即使授权获得通过，您也将无法按照无核心规则读取响应。

因此，如果要继续使用“客户端凭据”流，您将：

1. 在浏览器中，向您自己的服务器发出请求。

    fetch("http://myserver.com/getToken") 

2. 然后，您将在服务器上执行https://accounts.spotify.com/api/token请求，以发送所有正确的信息。 然后将返回的访问令牌发送回客户端

    //this is assuming a nodejs server environment var postQuery = 'grant_type=client_credentials '; var request = require('request'); var express = require('express'); var app = express(); app.get('/getToken', function(req, res){ request({ url: "https://accounts.spotify.com/api/token", method: "POST", headers: { 'Authorization': 'Basic YourBase64EncodedCredentials', 'Content-Type': 'application/x-www-form-urlencoded', 'Content-Length': postQuery.length }, body: postQuery }, function (error, response, data){ //send the access token back to client res.end(data); }); }); 

3. 在使用正确的CORS标头设置的端点的正常提取请求中，使用该访问令牌进行访问

    fetch("http://myserver.com/getToken") .then(token=>{ //token will be the token returned from your own server side script //now we can make a new request to the tracks (or any other api) return fetch("https://api.spotify.com/v1/tracks",{ headers:{ 'Authorization': `Bearer ${token}` } }).then(r=>r.json()) }) .then(data=>{ //data will be the data returned from tracks api endpoint });