How to integrate IPstack API to fetch user location using JavaScript?

I am trying to integrate the IPstack API into my website to fetch real time user location data such as country, city, and timezone based on IP address.

My goal is to display location specific content on my website using this API.

From the documentation, I understand that I need to send a request like this:

https://api.ipstack.com/{IP_ADDRESS}?access_key=YOUR_ACCESS_KEY

The API returns useful data like location, ISP, timezone, and currency in JSON format .

What I tried

I attempted to call the API using JavaScript:

var ip = "134.201.250.155"; var access_key = "YOUR_ACCESS_KEY"; fetch(`http://api.ipstack.com/${ip}?access_key=${access_key}`) .then(response => response.json()) .then(data => { console.log(data); document.getElementById("output").innerHTML = data.city; }) .catch(error => console.error(error));

Expected result

The user’s city or country should display on the webpage.

Actual result

Nothing is displayed on the page, or sometimes I get errors related to CORS or undefined data.

Questions

What is the correct way to call the IPstack API from the frontend?

Do I need to use HTTPS or backend proxy for security?

How can I safely use the API key without exposing it?

Is there a better way to detect the visitor IP automatically instead of hardcoding it?