Spotify API 对 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 发送请求时，它返回的正是我想要的（它有效）我不明白这与我正在做的有什么不同...... ？有人可以帮忙吗？

如果这有帮助的话，这里还有 Javascript 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 无法读取返回的响应。

因此，您的请求不会发送授权标头，因为它不是no-cors 模式下允许的简单标头之一。所以你的请求失败了。即使授权通过，您也无法按照 no-cors 规则读取响应。

因此，如果您想继续使用客户端凭据流程，您将：

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
    });