Hi Everyone,
I’ve been stuck in the Jammming project from the React Module for a while now. I was able to authenticate into my Spotify account but the search feature does not work, getting the following error:
Access to fetch at ‘https://api.spotify.com/v1/me/search?type=track&q=Bob’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Request header field authorizarition is not allowed by Access-Control-Allow-Headers in preflight response.
I’ve checked if endpoints are correct and if it retrieves a token - but can’t seem to find a solution for it.
Please, find codes below:
Spotify.js:
let accessToken;
const clientID = 'hidden';
const redirectURI = "http://localhost:3000/";
const Spotify = {
getAccessToken() {
console.log('1 got here');
if (accessToken) {
// console.log(accessToken);
return accessToken;
}
//check for token match;
const tokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
if (tokenMatch && expiresInMatch) {
accessToken = tokenMatch[1];
const expiresIn = Number(expiresInMatch[1]);
window.setTimeout(() => accessToken = '', expiresIn * 1000);
window.history.pushState('Access Token', null, '/');
// console.log('got in if');
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();
let fetchAddress = `https://api.spotify.com/v1/me/search?type=track&q=${term}`;
console.log(fetchAddress);
console.log(accessToken);
return fetch(fetchAddress,
{headers: {
Authorizarition: `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.artist[0].name,
album: track.album,
uri: track.uri
}))
})
},
savePlaylist(playlistName, trackUris) {
if (!playlistName || !trackUris.length) {
return;
}
const accessToken = Spotify.getAccessToken();
const headers = { Authorizarition : `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({ playlistName: playlistName })
})
}).then(response => response.json()).then(jsonResponse => {
const playlistId = jsonResponse.id;
return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`, {
headers: headers,
method: 'POST',
body: JSON.stringify({ uris: trackUris })
})
})
}
}
export default Spotify;
App.js:
import React from 'react';
import './App.css';
import { Playlist } from './../Playlist/Playlist';
import { SearchBar } from './../SearchBar/SearchBar';
import { SearchResults } from './../SearchResults/SearchResults';
import Spotify from '/Users/mateusmotter/Desktop/Coding/Projects/jammming-test2/src/util/Spotify.js';
class App extends React.Component {
constructor(prop) {
super(prop);
this.state = {
searchResults: [],
playlistName: 'New Playlist',
playlistTracks: [] ,
};
this.addTracks = this.addTracks.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
}
addTracks(track) {
let tracks = this.state.playlistTracks;
if (tracks.find(savedTrack => savedTrack.id === track.id)) {
return;
}
tracks.push(track);
this.setState({ playlistTracks: tracks });
}
removeTrack(track) {
let tracks = this.state.playlistTracks;
tracks = tracks.filter(currentTrack => currentTrack.id !== track.id);
this.setState({ playlistTracks: tracks });
}
updatePlaylistName(name) {
this.setState({ playlistName: name });
}
savePlaylist() {
const trackUris = this.state.playlistTracks.map(track => track.uri);
Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
this.setState({
playlistName : 'New Playlist',
playlistTracks : []
})});
}
search(term) {
Spotify.search(term).then(searchResults => {
this.setState({ searchResults: searchResults })
});
}
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div className="App">
<SearchBar onSearch={this.search}/>
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} onAdd={this.addTracks}/>
<Playlist playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}/>
</div>
</div>
</div>
)
}
}
export default App;
Thank you in advance!
