How do I resolve this CORS error on Spotify Search API?

Question

I am rather new to APIs in Javascript. I am attempting to connect to Spotify's APIs using the following code. I already have code that gets a valid token already.

  function searchApi() {
    const searchBox = window.document.getElementById("searchBox");
    const searchString = searchBox.value;

    fetch(searchUrl, {
      q: searchString,
      type: "artist",
      headers: {
        'Bearer': token
      }
    }).then(function (response){
      return response.json();
    }).then(function (data){
      console.log(data);
    })

  }

However, I am currently getting a CORS error I am unsure how to resolve.

Access to fetch at 'https://api.spotify.com/v1/search' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field bearer is not allowed by Access-Control-Allow-Headers in preflight response.

Does anyone know what I should do to resolve this error?

Answer 1

You are getting this because the fetch request you send originates from a http site rather than a https site, ie it doesn't use ssl.