0

I wanted to use the Musixmatch API however I got stuck with the Error: "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:82' is therefore not allowed access." Tried so many ways to find the solution but could not please help, thank you here are my files index.html & main.js file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>musixmatch</title>
  <script type="text/javascript" src="http://tracking.musixmatch.com/t1.0/AMa6hJCIEzn1v8RuOP"></script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script type="text/javascript" src="http://tracking.musixmatch.com/t1.0/AMa6hJCIEzn1v8RuOP"></script>
  <link rel="stylesheet" href="css/style.css"> 
</head>
<body>
<div data-role="page" id="home_page"> 
<header data-role="header">
  <h1> Search Lyrics</h1>
  <a href="#"> Home</a>
  <a href="visit_places.html"> Contact</a>
</header>
<article data-role="content">
  <div class="container">
    <div class="jumbotron">
      <h3 class="text-center">Explore the world's largest catalog of song lyrics and translations</h3>
      <form id="searchForm">
      <input type="text" class="form-control" id="searchText" placeholder="Search for any Song here..">
   </form>
    </div>
  </div>
  
  <div class="container">

  </div>
    <script type="text/javascript" src="http://tracking.musixmatch.com/t1.0/AMa6hJCIEzn1v8RuOP"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="js/main.js"></script>
 </article>
<footer data-role="footer" data-position="fixed"> 
   <nav data-role="navbar">
      <ul>
     <li><a href="#" data-icon="home"> Home </a> </li>
     <li><a href="#" data-icon="grid"> Photos</a> </li>
     <li><a href="#" data-icon="info"> Info </a> </li>
      </ul>
   </nav>
</footer>
  </div>
</body>
</html>

main.js file

$(document).ready(() =>{
   $('#searchForm').on('submit', (e) => {
    // console.log($('#searchText').val());
     let searchText = $('#searchText').val();
  getSongs(searchText);
  e.preventDefault();
  });
});
function getSongs(searchText){
  //console.log(searchText);
  axios.get('http://api.musixmatch.com/ws/1.1/track.search?apikey=***&q_track='+searchText)
   .then((response) => {
      console.log(response);


   })
   .catch((err) => {
      console.log(err);
   });
}
Venki WAR
  • 1,997
  • 4
  • 25
  • 38
  • 1
    If you don't have control of the server there is nothing you can do. The response from a cross-domain request needs to include CORS headers, which this does not. The alternative is to make the request from the server side, not JS. – Rory McCrossan May 03 '18 at 08:42
  • May be try https:// ? or try using jQuery, instead of axios, may be it's the plugin problem. – Sergej May 03 '18 at 08:48
  • I got the Solution: just have to add https://cors.io/ before link –  May 03 '18 at 10:43

0 Answers0