Axios 403 error when sending get request

[appdev2322]

hello,
i am working on an app with spotify API and i just cant get past this error that doesn't allow me to get information using the API. when i send a get request, i keep getting a 403 error. what is wrong with my code? i know my formatting is correct, but if anyone knows if I'm missing something with axios configuration then please help.
here is my code for the method in concern:
const fetchTopSongs = async (accessToken) => {
try {
const headers = {
Authorization: Bearer ${accessToken},
};
console.log(urlCode)
console.log(accessToken)
await axios.get(https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=25, {headers}).then((response) => {
setTopSongs(response.data.items);
})
console.log(topSongs);
} catch (error) {
console.log(error);
}
};
as you can see i am testing it by checking console, but that doesn't help the problem and i get this error:
AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
if you get this then please help, thanks

 

[VBService]

On the beginning, only for explanation purpose, what exactly mean error message:

The error message "Request failed with status code 403" indicates that the request was unsuccessful due to insufficient access permissions. When communicating over the internet, such as sending requests to a server, a 403 error code means that the server recognized the request but is denying access to the requested resource because the user does not have adequate permissions.

IMHO the problems are in these parts of the code:

• Incorrect interpolation: The Bearer ${accessToken} in the headers object should be enclosed in backticks () instead of regular quotes. This allows for string interpolation.
• the same problem incorrect interpolation: https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=25

try for example like this way:

const fetchTopSongs = async (accessToken) => {
  try {
    const headers = {
      Authorization: `Bearer ${accessToken}`,
    };

    const response = await axios.get(`https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=25`, {headers});
    setTopSongs(response.data.items);
    console.log(topSongs);
  } catch (error) {
    console.log(error);
  }
};

 

[BigDady]

How to Fix a 403 Forbidden Error?

1. Refresh the Page and Double Check the Address.
2. Clear Your Browser Cache.
3. Modify Your File Permissions.
4. Delete and Restore the .htaccess File.
5. Deactivate and then Reactivate Your Plugins.
6. Deactivate CDN Temporarily.
7. Check to See If Hotlink Protection Is Misconfigured.
8. Disconnect From Your VPN.

 

[VBService]

On the beginning, only for explanation purpose, what exactly mean error message:

The error message "Request failed with status code 403" indicates that the request was unsuccessful due to insufficient access permissions. When communicating over the internet, such as sending requests to a server, a 403 error code means that the server recognized the request but is denying access to the requested resource because the user does not have adequate permissions.

IMHO the problems are in these parts of the code:

• Incorrect interpolation: The Bearer ${accessToken} in the headers object should be enclosed in backticks () instead of regular quotes. This allows for string interpolation.
• the same problem incorrect interpolation: .../top/tracks?time_range=${timeRange}&limit=25

try for example like this way:

const fetchTopSongs = async (accessToken) => {
  try {
    const headers = {
      Authorization: `Bearer ${accessToken}`,
    };

    const response = await axios.get(`.../api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=25`, {headers});
    setTopSongs(response.data.items);
    console.log(topSongs);
  } catch (error) {
    console.log(error);
  }
};

replace "..." with the full url in the code above