GET request taking too long to resolve

Hi,

I’m creating a little hobby project to learn more about async/await and promises. The project is to simply search and return lyrics using the MusixMatch API.

I have 2 functions that do the searching. searchSong() finds the trackID and passes that to searchLyrics() which ultimately returns the lyrics. The API methods are working fine when I test them on Postman. However, when I run them in my JS code the functions take a long time to return the lyrics whereas Postman returns them almost instantaneously.

Can anyone point me in the right direction? I’ve spent longer than I’d like to admit figuring out a way to solve this issue.

searchBtn.addEventListener('click', (e) => {
  console.log('search submitted');
  searchSong(songInput, artistInput, musixApi)
    .then((res) => {
      console.log('searching');
      if (res.message.header.status_code === 200) {
        searchLyrics(res.message.body.track.track_id)
          .then((res) => {
            lyricsDisplay.textContent = res.message.body.lyrics.lyrics_body;
          })
          .catch((err) => console.log(err));
      }
    })
    .catch((err) => console.log(err));
  e.preventDefault();
});

async function searchSong(songInput, artistInput, musixApi) {
  let proxyurl = 'https://cors-anywhere.herokuapp.com/';
  let url = 'https://api.musixmatch.com/ws/1.1/matcher.track.get?';
  let artist = artistInput;
  let song = songInput;
  const response = await fetch(
    `${proxyurl}${url}apikey=${musixApi}&q_artist=${artist}&q_track=${song}`
  );
  const responseData = await response.json();
  return responseData;
}

async function searchLyrics(trackId, apikey = musixApi) {
  let proxyurl = 'https://cors-anywhere.herokuapp.com/';
  let url = 'https://api.musixmatch.com/ws/1.1/track.lyrics.get?';
  const response = await fetch(
    `${proxyurl}${url}apikey=${musixApi}&track_id=${trackId}`
  );
  const responseData = await response.json();
  return responseData;
}

Do you use the cors proxy for both cases? Otherwise, it’s likely just the proxy being slow.

No, I did not use the cors proxy in the Postman tests. I get the below error when I add the cors proxy to Postman
Missing required request header. Must specify one of: origin,x-requested-with

I thought that the cors proxy might be the issue so I tried adding {mode: ‘no-cors’} to the fetch but that didn’t seem to work. Is there a way I can work with the API without using the cors proxy?

I don’t know the API so I can’t really say. But usually, for most well-made APIs it shouldn’t be a problem.

Here is a list of APIs, it lists the CORS as unknown for this API

One option is to build a back-end (e.g. using Express) and have that do the fetching for the client (sometimes referred to as a pass-through proxy). Then using the cors package. This would also let you hide the API key so only the back-end would use it and not the front-end client. It’s fairly easy if you know how to do it, otherwise, it’s a pretty deep rabbit hole.