Spotify API Fetch 401 and 400 error only valid bearer authentication supported

Question

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

Error Log

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

Exact response

Answer 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.