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端点（例如$('#usr_id_type_1').click(function() { alert("1"); $('input[name="usr_matriculation"]').keyup(function(e) { if (/\D/g.test(this.value)) { // Filter non-digits from input value. this.value = this.value.replace(/\D/g, ''); } }); });

发出请求）

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

由于此，您的请求没有发送授权标头，因为它不是无芯模式下允许的simple headers之一。因此，您的请求失败。即使授权获得通过，您也仍然无法按照无心规则来读取响应。

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

在浏览器中，向您自己的服务器发出请求。
```
no-cors
```
然后在服务器上，您将从那里发出fetch("http://myserver.com/getToken")请求，以发送所有正确的信息。然后将返回的访问令牌发送回客户端
```
https://accounts.spotify.com/api/token
```

在正常获取请求中将该访问令牌用于您需要使用的端点，因为它们是使用正确的CORS标头设置的

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

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

1 个答案: