Spotify API提取401和400错误仅支持有效的承载人身份验证
在Spotify WebAPI文档的指导下,我试图通过客户凭证方法获取请求用户/帐户数据。 spotify doc 。我正在使用嵌套的提取请求。我在第二次提取时得到400和401的回应,抱怨未被授权或
“消息”:“仅支持有效的承载验证”
具体取决于我的GET请求。我遵循文档,我的令牌响应似乎有效,我不确定为什么不会。是的,我尝试了不同的端点,然后重置了客户的秘密。我还包含了代码,键是在发布之前重置的,代码
import React, { Component, useState, useEffect } from 'react';
//Custom IMPORTS:
import '../PageCss/HeaderSection.css'
const Spotify = () => {
const [baseUrl, setBaseUrl] = useState("https://accounts.spotify.com/api/token");
const [spotifyArtists, setSpotifyArtists] = useState("https://api.spotify.com/v1/artist/7bSpQNOg9UsW530DuXM3X5");
const [token, setToken] = useState([]);
const [spotifyResonse, setspotifyResonse] = useState([]);
const [currentStatus, setStatus] = useState(false);
const [currentStatus2, setStatus2] = useState(false);
const client_id = '';
const client_secret = '48bdac084... f8ddb412';
useEffect(() => {
fetch(baseUrl,
{
method: 'POST',
body: 'grant_type=client_credentials&client_id=' + client_id + '&client_secret=' + client_secret,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((response) => {
if (!response.ok) {
return Promise.reject(new Error("Spotify Token Request Error"));
}
else {
return response.json();
}
})
.catch((err) => {
console.log("First Fetch " + err);
})
.then((json) => {
try {
console.log("Current token after first fetch: " + json.access_token);
console.log(": " + json.token_type);
console.log(": " + json.expires_in);
setToken(json.access_token);
setStatus(true);
console.log("Fetch 2 Requesting data with token: " + token);
return fetch(spotifyArtists,{
method: 'GET',
headers: {
'Authorization': `Bearer ${token}` ,
'Content-Type': 'application/json'
}})
}
catch
{
return Promise.reject(new Error(`State Error!: Data: ${token} , Connection:${currentStatus}`));
}
})
.then((response) => {
if (!response.ok) {
return Promise.reject(new Error("Spotify Data Request with token Error" + response.status));
}
else {
return response.json();
}
})
.catch((err) => {
console.log("Second Fetch" + err);
})
.then((json) => {
try {
console.log("After data request: " + json)
console.log("Token after request" + token);
setspotifyResonse(json);
setStatus2(true);
}
catch
{
return Promise.reject(new Error(`State Error2 !: Data: ${spotifyResonse} , Connection2:${currentStatus2}`));
}
})
.catch((err) => {
console.log("After 2nd Fetch Error" + err);
})
}, [baseUrl, spotifyArtists]);
return (
<div >
</div>
)
};
export default Spotify;
错误log
Under guidance of the Spotify WebAPI doc I am trying to get request user/account data via Client Credentials method. Spotify Doc. I am using a nested fetch request. I am getting a 400 and 401 response on my second fetch complaining about either not being authorized or
"message": "Only valid bearer authentication supported"
depending on my get request. I followed the doc and I have my token response that seems valid I'm unsure as to why it wouldn't be. Yes I tried different endpoints, and I reset my client secret. I have also included the code, the key was reset before posting so, code
import React, { Component, useState, useEffect } from 'react';
//Custom IMPORTS:
import '../PageCss/HeaderSection.css'
const Spotify = () => {
const [baseUrl, setBaseUrl] = useState("https://accounts.spotify.com/api/token");
const [spotifyArtists, setSpotifyArtists] = useState("https://api.spotify.com/v1/artist/7bSpQNOg9UsW530DuXM3X5");
const [token, setToken] = useState([]);
const [spotifyResonse, setspotifyResonse] = useState([]);
const [currentStatus, setStatus] = useState(false);
const [currentStatus2, setStatus2] = useState(false);
const client_id = '';
const client_secret = '48bdac084... f8ddb412';
useEffect(() => {
fetch(baseUrl,
{
method: 'POST',
body: 'grant_type=client_credentials&client_id=' + client_id + '&client_secret=' + client_secret,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((response) => {
if (!response.ok) {
return Promise.reject(new Error("Spotify Token Request Error"));
}
else {
return response.json();
}
})
.catch((err) => {
console.log("First Fetch " + err);
})
.then((json) => {
try {
console.log("Current token after first fetch: " + json.access_token);
console.log(": " + json.token_type);
console.log(": " + json.expires_in);
setToken(json.access_token);
setStatus(true);
console.log("Fetch 2 Requesting data with token: " + token);
return fetch(spotifyArtists,{
method: 'GET',
headers: {
'Authorization': `Bearer ${token}` ,
'Content-Type': 'application/json'
}})
}
catch
{
return Promise.reject(new Error(`State Error!: Data: ${token} , Connection:${currentStatus}`));
}
})
.then((response) => {
if (!response.ok) {
return Promise.reject(new Error("Spotify Data Request with token Error" + response.status));
}
else {
return response.json();
}
})
.catch((err) => {
console.log("Second Fetch" + err);
})
.then((json) => {
try {
console.log("After data request: " + json)
console.log("Token after request" + token);
setspotifyResonse(json);
setStatus2(true);
}
catch
{
return Promise.reject(new Error(`State Error2 !: Data: ${spotifyResonse} , Connection2:${currentStatus2}`));
}
})
.catch((err) => {
console.log("After 2nd Fetch Error" + err);
})
}, [baseUrl, spotifyArtists]);
return (
<div >
</div>
)
};
export default Spotify;
Error Log
My request header yes the keys are different from above code, I had to redo this so many times.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在不和谐的帮助之后,Spotify API和Web有不同的艺术家URL。一个小字母是问题。 get/v1/Artists/ID HTTP/1.1。让艺术家不是艺术家。现在一切都在努力,我的空闲时间。
Welp, turns out after the help from discord that the spotify API and web have different artist URLS. A tiny letter 's' was the issue. GET /v1/artists/id HTTP/1.1. GET ARTISTS not ARTIST. Everything is working now r.i.p my free time.