api/令牌授权上的Spotify API错误请求错误:400 [英] Spotify API bad request on api/token authorization Error: 400

问题描述

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

I am trying to authorize spotify api requests using Client Credentials Flow on the Spotify API Docs page. Here is my code in javascript ES6 format using the fetch API

    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.

The console is saying it is a bad request and doesn't return any JSON.

让我感到困惑的另一件事是，当我使用带有这些标头和正文的POSTMAN发送请求时，它恰好返回了我想要的内容(它可以正常工作)，我看不出这与我在做什么有什么不同...?谁能帮忙吗?

Another thing that really confuses me is that when I send the request using POSTMAN with those headers and that body, it returns exactly what I want (It works) I don't see how this is different from what I'm doing...? Could anyone please help?

如果有帮助，这也是Javascript Jquery Ajax中邮递员的代码:

Also here is the code from postman in Javascript Jquery Ajax if this helpls:

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中的请求外观

This is what the request looks like in DevTools

推荐答案

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

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

这篇关于api/令牌授权上的Spotify API错误请求错误:400的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！