Spotify API Get Methode Blocked?
Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js
const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";
function searchSong() {
let songName = document.getElementById("song-name").value;
fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
headers: {
"Authorization": `Bearer ${ACCESS_TOKEN}`
}
})
.then(response => response.json())
.then(data => {
let songResults = data.tracks.items;
if (songResults.length > 0) {
let songList = document.createElement("ul");
for (let i = 0; i < songResults.length; i++) {
let song = songResults[i];
let songItem = document.createElement("li");
songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;
songList.appendChild(songItem);
}
let songResultsDiv = document.getElementById("song-results");
songResultsDiv.innerHTML = "";
songResultsDiv.appendChild(songList);
} else {
let songResultsDiv = document.getElementById("song-results");
songResultsDiv.innerHTML = "Sorry, no songs found.";
}
})
.catch(error => {
const errorMessage = document.getElementById("error-message");
errorMessage.innerText = error;
});
}
function selectSong(songId) {
fetch("db.php", {
method: "POST",
body: JSON.stringify({songId: songId}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert("Song added to the list!");
} else {
alert("Error adding song to the list.");
}
})
.catch(error => {
console.log(error);
});
}
Hier ist dann noch die Index.html:
<!DOCTYPE html>
<html>
<head>
<title>DJ Song Request</title>
<script src="script.js"></script>
</head>
<body>
<h1>DJ Song Request</h1>
<form>
<label for="song-name">Enter song name:</label>
<input type="text" id="song-name" name="song-name">
<button type="submit" onclick="searchSong()">Search</button>
</form>
<div id="song-results"></div>
</body>
</html>
Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D
2 Antworten
Ich habe zugegeben noch nie mit der Spotify API gesprochen, aber es klingt fast so als müsstest du die Daten mit JSONP abholen, Browser blockieren solche Requests sonst gern mal wegen XSS. Btw. einen API-Key in Client-Code zu hinterlegen ist nicht die beste Idee, den kann dir ja jeder klauen. Das solltest du dringend ändern und dir ggf. einen Wrapper z.B. mit PHP bauen, dann schlägst du zwei Fliegen mit einer Klappe.
Das Problem ist nicht die Spotify API, sondern dein Code.
Das Problem ist der button mit type submit. Der Button mit dem Typ sendet die Daten aus dem Form ladet die Seite neu. Währenddessen führst du auch dein Javascript Code aus. Firefox unterbindet dann dein fetch Request mit dieser Fehlermeldung.
Wenn du den Button Typ auf "button" änderst, sollte dein Code funktionieren.