0

I am trying to learn how to work with API. My objective is to fetch the lyrics for a given artist_name and given track_name from musixmatch api. I tried it with python and everything worked perfectly, now I want to implement it on my localhost(for now) but I am not making any progress.

I am using fetch api of javascript to receive the response. Here's the javascript code:

    $("#lyr-sbmt-btn").on('click', function(){
   
    var artist_name = $("#aname").val()
    var track_name = $("#tname").val()
    console.log(artist_name + track_name)

    base_url = "https://api.musixmatch.com/ws/1.1/"
    api_key = "i_have_my_api_key_here"
    lyrics_matcher = "matcher.lyrics.get"
    format_url = "?format=json&callback=callback"
    artist_search_parameter = "&q_artist="
    track_search_parameter = "&q_track="

    api_call = base_url + lyrics_matcher + format_url + artist_search_parameter + 
    artist_name + track_search_parameter + track_name + api_key

    console.log(api_call)
    fetch(api_call, {mode:'no-cors'})
    .then(res => console.log(res))
    
})

The url that I send the request to is correct. When I click on that url link it shows me this enter image description here

Though the link is correct the response that I receive from fetch contains no data. Here's the response: enter image description here

I have been reading a lot of similar questions on stackoverflow and tried almost all of them but unfortunately none of them worked. If you could help me sort out this problem that would mean a lot

Sandesh Gyawali
  • 13
  • 3
  • Why `{mode:'no-cors'}`? It's a request to a different origin. With `{mode:'no-cors'}` you get a response with empty body. –  Jul 27 '21 at 11:03
  • @jabaa As I am new to javascript and API programming I have no clear idea on what should I do. Your guidance on this will be much helpful – Sandesh Gyawali Jul 27 '21 at 15:44
  • It would help me to understand your code if you answer my question: Why `{mode:'no-cors'}`? That's a very uncommon configuration. I've never seen it before and had to look it up in the documentation. –  Jul 27 '21 at 15:45
  • if i remove it, following error message appears: Access to fetch at 'https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?format=json&callback=callback&q_artist=eminem&q_track=rap%20god&apikey=e02d3c3ec9197287c231acb5643b3699' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. – Sandesh Gyawali Jul 27 '21 at 15:51
  • You should read about [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) and the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). The latter is a browser-specific safety feature that can only be disabled by the API sending an [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) header. Since the API doesn't send this header it doesn't support direct access from a browser. –  Jul 27 '21 at 15:57
  • There are different approaches to solve the problem. If this is a private website only for used by you you can disable the same-origin policy in an older browser or with an extension. If this website is visited by people that can't apply this solution you need something like a proxy server that accesses the API and provides the data to the browser. –  Jul 27 '21 at 16:00

0 Answers0