Creating a connection between IP addresses and their location

mct5330

Mct5330

Posted on January 31, 2022

Creating a connection between IP addresses and their location

IP-Fast

if (this.ip === null) {
      this.updateUserIP();
    }
Enter fullscreen mode Exit fullscreen mode

Above is our part of the program that lets us know if there is no current ip information, if not then we will call for it to be updated.
Below are the two parts of the code we use to assign the fetched ip values to this.ip, and this.location. The first thing we do is connect to the api using fetch(this.ipLookUp) to get the information we need. Next we assign it. In this case this.ip is getting assigned the IP address that ip-fetch collected, and this.location is being assigned the city and country that ip-fetch collected. (Think link was also useful in checking the data: https://ip-fast.com/api/ip/?format=json&location=True)

async updateUserIP() {
    return fetch(this.ipLookUp)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        this.ip = data.ip;
        this.location = `${data.city}, ${data.country}`;
        return data;
      });
Enter fullscreen mode Exit fullscreen mode

GEOIpData

  async getGEOIPData() {
    const IPClass = new UserIP();
    const userIPData = await IPClass.updateUserIP();
    return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.long = data.longitude;
        this.lat = data.latitude;
        this.city = data.city;
        this.state = data.region_name;
        return data;
      });
  }
Enter fullscreen mode Exit fullscreen mode

Above is a similar block to assign longitude, latitude, city, and state information. What's different though is this api uses the fetch-ip method along with the geoip api above in this line const userIPData = await IPClass.updateUserIP();.
However I keep getting the error below and the map won't update.

Failed to load resource: Origin
http://localhost:8000 is not
allowed by Access-Control-Allow-
Origin.
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
mct5330
Mct5330

Posted on January 31, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related