I am very new to web development and I suspect this is a simple issue.

When I run my website via VScode my landing page displays the users region and city name onload. When I upload the same code to my website it returns nothing. I'm having trouble even displaying an error message in order to debug. I tried to get location.origin because this api apparently requires a "non null origin". I don't even fully understand how ACAO works.

//Display users location in welcome message via IP
function locate() {
fetch('https://ip-api.com/json/')
.then(function(response) {
  response.json().then(jsonData => {
      data = jsonData;
    document.getElementById("welcome").innerHTML = `Come in, ${data.city}, ${data.regionName}. Everyone is welcome.`
  });
})
.catch(function(error) {
//Attempt at getting some information on the issue.
    document.getElementById("welcome").innerHTML = `Come in, ${location.origin}. Everyone is welcome.`
    console.log(error)
});
};

All help, and constructive criticism, is appreciated. Thanks.