Не удается получить данные из API Musixmatch

Question

Я изучаю Javascript API для создания простого сайта текстов песен с API от MusixMatch

, но я получил такую ​​ошибку:

(индекс): 1 Доступ к извлечение в 'http://api.musixmatch.com/ws/1.1/track.search?q_artist=selena&page_size=3&page=1&s_track_rating=desc' от источника 'http://127.0.0.1: 5500 ' было заблокировано политикой CORS: заголовок «Access-Control-Allow-Origin» отсутствует на запрашиваемый ресурс. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

script. js: 24 Uncaught (в обещании) TypeError: Не удалось получить

asyn c функция (asyn c)

searchSong @ script. js: 20

(анонимный) @ script. js: 14

А это мой код:

const form = document.getElementById('form')
const search = document.getElementById('search')
const result = document.getElementById('result')

const apiURL =  `http://api.musixmatch.com/ws/1.1/`

form.addEventListener('submit', e => {
    e.preventDefault();
    searchValue = search.value.trim()

    if(!searchValue) {
        alert('There is Nothing')
    } else {
        searchSong(searchValue)
        
    }
})

async function searchSong(searchValue){
    const searchResult = await fetch(`${apiURL}track.search?q_artist=${searchValue}&page_size=3&page=1&s_track_rating=desc`)
    const data = await searchResult.json();

    showData(data)
}

function showData(data){
    result.innerHTML = `
    <ul class="song-list"
    ${data.data.map(song => `
        <li>
        <div>
        <strong>
        ${artist_name}
        </strong> - ${track_name}
        </div>
        <span-data-artist="${artist_name}" data-songTitle="${track_name}">
         get lyrics
        </span>

        </li>
    `).join('')
    }
    </ul>
    `
}


result.addEventListener('click', e => {
    const clickedElement = e.target;

    if(clickedElement.tagName === 'SPAN'){
        const artist = clickedElement.getAttributte('data-artist')
        const songTitle = clickedElement.getAttributte('data-songTitle')

        getLyrics(artist,songTitle)
    }

})

async function getLyrics(artist,songTitle) {
    
    const res = res = await fetch(`${apiURL}track.search?q_track=${artist,songTitle}&page_size=3&page=1&s_track_rating=desc`)
    const lyrics = await res.json()

    // const lyrics = {lyrics.lyrics_body.split("\n").map(lyric => {
    //     return <p>{lyric}</p>
    // })}

    result.innerHTML = `<h2><strong>${artist}</strong> - ${songTitle} 
    </h2> <p>${lyrics}</p>`

}

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(40, 40, 40);
    font-family: 'Roboto', sans-serif;
}

header {
    padding: 30px;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    height: 40vh;
}

.container {
    position: absolute;
    color: white;
    font-size: 22px;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.container h1{
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-align: center;
}

form {
    position: relative;
    display: flex;
    width: 500px;
}

input {
    width: 100%;
    max-width: 100%;
    height: 45px;
    padding: 15px 30px;
    border-radius: 50px;
    border:none;
    outline: none;
}

button{
    width: 100px;
    max-width: 100%;
    background-color: #9e2092;
    color: #ffffff;
    border-radius: 50px;
    border: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    top: 2px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

button:hover{
    transform: scale(0.96);
}

.result {
    color: #ffffff;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    margin: 20px 10px;
    position: relative;
    
}

h1 {
    font-family: 'Montserrat', sans-serif;
}

.song-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

.song-list li{
    margin-bottom: 20px;
    width: 500px;
    justify-content: space-evenly;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 18px;
    text-decoration: overline;
}

.song-list li::after{
    content: "";
    position: absolute;
    right: -20px;
    left: -20px;
    bottom: -4px;
    height: 3px;
    background-color: rgb(12, 146, 100);
    display: inline-block;
}

.song-list li span{
    float: right;
    background-color: #9e2092;
    border: none;
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 400;
    padding: 40x 10px;
    text-transform: capitalize;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Lirik Baru</title>
</head>
<body>
    <header>
        <div class="container">
            <h1>Cari Lirik</h1>
            <form action="" id="form" autocomplete="off">
                <input type="text" id="search"
                placeholder="Ketik Judul Lagu Disini">
                <button>Cari</button>
            </form>
        </div>
    </header>

    <section class="result" id="result">
        <h1>Hasil Pencarian</h1>
    </section>

    <script src="script.js "></script>
</body>
</html>

Полный код на github здесь

Большое спасибо, сэр:)