Axios 403 error when sending get request

Joined
Jul 2, 2023
Messages
1
Reaction score
0
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
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
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:

JavaScript:
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);
  }
};
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
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.
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
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:

JavaScript:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,821
Messages
2,569,725
Members
45,511
Latest member
Osiris-Team

Latest Threads

Top