Javascript Spotify API对API/令牌授权的错误请求错误：400

我正在尝试使用spotify api文档页面上的客户端凭据流来授权spotify api请求。下面是我使用FetchAPI编写的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

另一件让我感到困惑的事情是，当我使用带有这些标题和正文的邮递员发送请求时，它会准确地返回我想要的内容（它可以工作），我看不出这与我正在做的有什么不同。。。？有人能帮忙吗

下面是Javascript Jquery Ajax中postman的代码，如果这有助于：

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中的样子

---

该特定端点不打算在客户端使用。您应该在服务器端脚本中使用它

客户端凭据流在服务器到服务器中使用 认证

另一个提示是，它只用于服务器端，它使用客户机机密，正如其名称所暗示的那样，它意味着要保密，并且在客户机上查看它并不是非常机密

因此，您可以从该端点获得访问令牌，然后在客户端使用该令牌向其他api端点发出请求，如

https://api.spotify.com/v1/tracks

现在说说为什么它在你的电话里不起作用。它在postman中工作，因为它忽略CORS，并且正确地发送授权头。但是，在浏览器中将

fetch（）

请求模式设置为

no cors

。在这种模式下，只能发送某些头，javascript无法读取返回的响应

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

因此，如果要继续使用客户端凭据流，您应该：

从浏览器向您自己的服务器发出请求

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

然后在服务器上执行

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

在对需要使用的端点的正常提取请求中使用该访问令牌，因为它们是使用正确的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
 });

---

如果这些是你真正的api凭证，每个人都可以解码这些凭证，它们不是我真正的凭证