尽管示例/指南（https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow）是用cURL编写的，但我需要翻译成Javascript，我正在使用Spotify API并需要获取访问令牌。
主要问题是将请求主体参数“ grant_type”设置为“ client_credentials”和“此POST请求的主体必须包含以下参数，这些参数按照OAuth 2.0规范的定义在application / x-www-form-urlencode中编码：“，但我不确定该怎么做。
我已经在命令提示符下尝试了cURL，它可以正常工作，但是我不会使用cURL。
我要做什么
curl -X "POST" -H "Authorization: Basic ZjM4ZjAw...WY0MzE=" -d grant_type=client_credentials https://accounts.spotify.com/api/token
我有什么
var auth_id = "";
var getToken = new XMLHttpRequest();
getToken.open('POST', 'https://accounts.spotify.com/api/token', true);
getToken.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
getToken.setRequestHeader('grant_type', 'client_credentials'); //this param needs to be in body but how???
getToken.setRequestHeader('Authorization', 'Basic (this part is my client id but I am not including it for obvious reasons)');
getToken.onload = function (){
var data = JSON.parse(this.response);
console.log(data);
auth_id=data.access_token;
}
getToken.send("client_credentials");
答案 0 :(得分：0)
我建议您使用更现代的<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Client resize behavior test in different container implementations</title>
<style>
* {
position: relative;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
height: 400px;
width: 600px;
border: 3px solid black;
background-color: lightgrey;
overflow: visible;
}
.title {
position: absolute;
}
.outer {
height: 100%;
width: 100%;
padding: 20px;
padding-top: 50px;
}
.inner {
height: 100%;
width: 100%;
border: 3px solid blue;
background-color: lightblue;
}
.client {
position: absolute;
border: 3px solid red;
background-color: lightcoral;
opacity: .5;
height: 100%;
width: 100%;
}
button {
margin: 10px;
}
</style>
<script type="module">
customElements.define("test-container", class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
* {
position: relative;
box-sizing: border-box;
}
:host {
contain: content;
display: block;
}
.shadow-outer {
height: 100%;
width: 100%;
padding: 20px;
padding-top: 50px;
}
.shadow-inner {
height: 100%;
width: 100%;
border: 3px solid blue;
background-color: lightblue;
}
</style>
<div style="position:absolute;">State-of-the-art HTML web component container with nested DIVS in the shadow-DOM</div>
<div class="shadow-outer">
<div class="shadow-inner">
<slot>
</slot>
</div>
</div>
`;
this.innerDiv = this.shadowRoot.querySelector(".shadow-inner");
}
get containerClientHeight() {
return this.innerDiv.clientHeight;
}
get containerClientWidth() {
return this.innerDiv.clientWidth;
}
});
const setClientSizeToParentClientSize = (client, button) => {
const parent = client.parentElement;
client.style.position = "absolute";
client.style.height = `${parent.containerClientHeight !== undefined ? parent.containerClientHeight : parent.clientHeight}px`;
client.style.width = `${parent.containerClientWidth !== undefined ? parent.containerClientWidth : parent.clientWidth}px`;
client.innerHTML += " resized";
button.disabled = true;
};
document.getElementById("set-client1").addEventListener("click", function () {
setClientSizeToParentClientSize(document.getElementById("client1"), this);
});
document.getElementById("set-client2").addEventListener("click", function () {
setClientSizeToParentClientSize(document.getElementById("client2"), this);
});
</script>
</head>
<body>
<div>
<div class="container" id="container1">
<div style="position:absolute;">Plain old light-DOM container with nested DIVs in the light-DOM</div>
<div class="outer">
<div class="inner">
<div class="client" id="client1">Client 1</div>
</div>
</div>
</div>
<button id="set-client1">Set client 1 size in JavaScript</button>
</div>
<div>
<test-container id="container2" class="container">
<div class="client" id="client2">Client 2</div>
</test-container>
<button id="set-client2">Set client 2 size in JavaScript</button>
</div>
</body>
</html>
API（如本地fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API）或第三方库（如fetch https://github.com/axios/axios
使用axios相当简单
fetch