Jamming - Did Spotify change endpoints?

While doing the Jamming project, I noticed that no matter my requests, the endpoints for the Spotify API don’t seem to be working at all. I saw a different post stating that they had changed back in 2018, but I’ve modified my code to be in accordance with their blog posts and yet nothing. Could anyone help? For reference, my current code to interact with the Spotify API is the following:

const clientId = '------------------------------'; const redirectUri = 'http://localhost:3000/'; let accessToken; const Spotify = { getAccessToken (){ if(accessToken){ return accessToken; } // check for token access first const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/); const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/); if(accessTokenMatch && expiresInMatch){ accessToken = accessTokenMatch[1]; const expiresIn = Number(expiresInMatch[1]); // clears parameters and grabs new access token after previous one expires window.setTimeout(() => accessToken = '', expiresIn * 1000); window.history.pushState('Access Token', null, '/'); return accessToken; } else { const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`; window.location = accessUrl; } }, search(term){ const accessToken = Spotify.getAccessToken(); return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, { headers: { Autorization: `Bearer ${accessToken}` } }).then(response => { return response.json(); }).then(jsonResponse => { if(!jsonResponse.tracks) { return []; } return jsonResponse.tracks.items.map(track => ({ id: track.id, name: track.name, artist: track.artists[0].name, album: track.album.name, uri: track.uri })); }); }, savePlaylist(name, trackUris){ if(!name || !trackUris.length){ return; } const accessToken = Spotify.getAccessToken(); const headers = { Authorization: `Bearer ${accessToken}` }; let userId; return fetch('https://api.spotify.com/v1/me', {headers: headers} ).then(response => response.json() ).then(jsonResponse => { userId = jsonResponse.id; return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, { headers: headers, method: 'POST', body: JSON.stringify({ name: name }) }).then(response => response.json() ).then(jsonResponse => { const playlistId = jsonResponse.id; return fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`, { headers: headers, method: 'POST', body: JSON.stringify({ uris: trackUris }) }) }) }) } } export default Spotify;

Hi, what’s the error message or response you get?

None at all. I’m not getting anything in the console when I click the SEARCH button, and if I click the Save to Spotify button I get an error because the function returns undefined, as I’m not getting anything back from the API.

Weird. This is the error I get when I replace my code with yours:
Bildschirmfoto 2021-10-23 um 19.05.06
Check your headers: You have a typo there

headers: {
  Autorization: `Bearer ${accessToken}`
}
1 Like

Yeah, I got the CORS issue later on too. When you disable CORS or allow the localhost:3000 url using an extension, the GET request still fails because of a 401 (unauthorized), so I’m guessing that my app is sending the request before having a valid access token, but can’t seem to fix it.

Did you correct the typo? It worked after I did that…

1 Like

SOLVED: It was that cursed typo. Thank you so much for noticing it! I’m Mexican and the translation for Authorization is Autorización, so I didn’t notice the missing h until you did. Now my app seems to be working with no issues.

1 Like