I’m implementing a “javascript FETCH() API” call in my front end; but once the code runs it triggers an error:

Access to fetch at 'https://saavn.dev/api/search/songs?query=promise' from origin 'https://544444465te.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The javascript code:

function SearchSongs() {
  const SearchSong = document.getElementById('Search').value.toLowerCase();
  // Saavn API endpoint for searching songs
  const saavnSearchUrl = 'https://saavn.dev/api/search/songs';



  const params = {
      query: SearchSong,
  };

  // Request headers
  const headers = {
      'Content-Type': 'application/json',

  };

  // Make the GET request to search for songs
  fetch(`${saavnSearchUrl}?${new URLSearchParams(params)}`, {
      method: 'GET',
      headers: headers,
  })
      .then(response => response.json())
      .then(songData => {
          playlist.innerHTML = '';
          for (const song of songData.data.results) {
              const songName = song.name;
              const artistName = song.primaryArtists;
              const highestQualityDownloadUrl = song.downloadUrl.find(downloadUrl => downloadUrl.quality === '320kbps');
              const image150x150 = song.image.find(image => image.quality === '150x150');
              const lowestQualityImage = song.image.find(image => image.quality === '50x50');
              playlist.innerHTML += `<li class="list-group-item" onclick="playSong('${highestQualityDownloadUrl.link}','${image150x150.link}'>
            <img src="${lowestQualityImage.link}">
            ${songName} by ${artistName}</span>
            </li>`;
          }
      })
      .catch(error => console.error('Error:', error)

I tried to add the CSRF token in the headers but the error persisted.
What is the problem ?