且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2021-11-16 22:31:30

该特定端点不是要在客户端使用的.您应该在某些服务器端脚本中使用它.

That particular endpoint is not meant to be consumed client side. You are supposed to use it in some server side script.

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

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

The Client Credentials flow is used in server-to-server authentication

另一个暗示它仅是服务器端的提示是,它使用了您的客户端机密,因为它的名称暗示着它应被保密,并且在客户端上不可见秘密.

Another hint that it is meant to be server side only is that it uses your client secret as its name implies it is meant to be kept secret and having it viewable on the client isn't very secret.

因此,从该终结点您可以获得访问令牌,然后可以在客户端使用该访问令牌向其他api终结点(如https://api.spotify.com/v1/tracks

So from that endpoint you get the access token which you can then use on the client side to make requests to the other api endpoints like https://api.spotify.com/v1/tracks

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

Now as for why it doesn't work in your calls. It works in postman because it ignores CORS, and it properly sends the authorization header. In the browser however you set the fetch() request mode to no-cors. In this mode only certain headers can be sent AND the response back cannot be read by javascript.

由于此,您的请求不会发送授权标头,因为它不是简单标头(在无核条件模式下允许使用).因此,您的请求失败.即使授权获得通过,您也仍然无法按照无心规则来读取响应.

Due to this your request does not send the authorization header as it is not one of the simple headers allowed in no-cors mode. And so your request fails. Even if the authorization went through you wouldn't have been able to read the response anyways as per no-cors rules.

因此,如果您想继续使用客户端凭据"流,您将:

So if you want to continue using the Client Credentials flow you would:

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

  1. From the browser, make a request to your own server.

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

  • 然后在服务器上,从那里执行https://accounts.spotify.com/api/token请求,发送所有正确的信息.然后将返回的访问令牌发送回客户端

  • On the server you would then do the https://accounts.spotify.com/api/token request from there sending all the correct information. Then send the returned access token back to the client

    //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标头进行了设置

  • Use that access token in a normal fetch request to the endpoints you need to use as they are setup with the proper CORS headers

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