I’m developing a Spotify application and I’m trying to retrieve lyrics using an XMLHttpRequest to an external API. However, when I check the network panel in the developer tools, the request has a status of 0, instead of the expected 200 or other valid responses.
Here’s a snippet of my code:
const artist = "Adele";
const song = "Hello";
const lyricsApiUrl = `https://api.lyrics-finder.com/?artist=${encodeURIComponent(artist)}&song=${encodeURIComponent(song)}`;
const req = new XMLHttpRequest();
req.open('GET', lyricsApiUrl, true);
req.send();
The request doesn’t return any data, and I’m left with a status of 0. I wonder if this could be a CORS issue or something specific to the Spotify app environment. Has anyone faced a similar problem? What can I do to work around this when accessing external APIs?
Status 0 in XMLHttpRequest indicates that the request was blocked before reaching the server, likely due to CORS restrictions. The Spotify app environment implements strict security policies that prevent direct API calls to external domains from the client side. I encountered this issue while developing a music app and resolved it by implementing a backend proxy server to manage the external API requests. This way, your Spotify app communicates with your own server, which retrieves data from the lyrics API and forwards it. Additionally, verify if the lyrics API offers support for JSONP or if it includes CORS headers for your domain, as some APIs allow callback parameters to bypass these restrictions, although this method has its drawbacks in contemporary development.
yeah, it’s prob the cors stuff. i had this too with my app, switched to fetch() and it worked like a charm. also, make sure the api lets cross-origin requests. some lyrics apis can block them from diff domains.