Spotify API提取401和400错误仅支持有效的承载人身份验证

发布于 2025-01-26 05:17:43 字数 4242 浏览 3 评论 0原文

在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;

Endpoints in question
enter image description here
enter image description here

Error Log

enter image description here

My request header yes the keys are different from above code, I had to redo this so many times.
enter image description here

Exact response
enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

潜移默化 2025-02-02 05:17:43

在不和谐的帮助之后,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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文