Client public IP

Ask the community
,
1

Hello I’m trying to get the client public IP unsuccessfully, I tried ipify npm package like that:

let ip = ipify({useIPv6: false}

Also like that:

function GetClientIp() {
 return getJSON("https://api.ipify.org/?format=json")
  .then(json => {
 return json.ip;
  })
  .catch(err => {
    console.log(err);
  })
}

And retrieve it also from another source:

function GetClientIp () {
	fetch('https://extreme-ip-lookup.com/json')
		.then((httpResponse) => {
			if (httpResponse.ok) {
				return httpResponse.json();
			}
		})
		.then((json) => {
			return json.query;
		}).catch((error) => {
			return error;
		});
}

In Client Side it’s not working, it’s giving and error like that: TypeError: Failed to fetch

In Backend it’s working but it’s always returning the same address (located in the United States) which I guess is the server IP, so is there a way to get the client’s public IP from the client side?

Thanks

2

I used this code which is the same

import { fetch } from 'wix-fetch';
$w.onReady(function () {
getIP();
})
function getIP() {
console.log("before fetch");
try {
fetch('https://extreme-ip-lookup.com/json', {
method: 'get'
})
.then((httpResponse) => {
if (httpResponse.ok) {
console.log("httpResponse");
return httpResponse.json();
}
})
.then((json) => {
console.log("json");
const ipAddress = json.query;
const country = json.country;
const city = json.city;
$w("#textStatus").text = "Your Current IP Address Is: " + ipAddress + " located in " + city + ", " + country;
return ipAddress;
})
} catch (err) {
console.log(err);
}
}

but this is what it shows, it’s stuck there, it doesn’t execute anything more:

706×170 15.7 KB

Is like if the fetch is crashing but catch clausure it’s not triggered…

3

If you are trying to get the IP Address, Country & City then use the below code.

import {fetch} from 'wix-fetch';

$w.onReady(function () {
   getIP();
});

function getIP() {
   fetch('https://extreme-ip-lookup.com/json', {
     method: 'get'
   })
   .then((httpResponse) => {
      if (httpResponse.ok) {
        return httpResponse.json();
      }
   })
   .then((json) => {
     const ipaddress = json.query;
     const country = json.country;
     const city = json.city;
     console.log({ ipaddress , country , city}); //print your details here
   })
   .catch( (err) => {
     console.log(err); //print error on console
   });
}
4

Hello Shan,

Thanks for the answer, but it’s not working neither, the problems seems to be that fetch function is failing in client side,

If I place the function on the backend, works perfectly but it’s giving a location in the USA Ashburn, I guess it’s the server address.

import { fetch } from 'wix-fetch';
import {getIPBackend} from 'backend/getIpModule'

$w.onReady(function () {
    getIP();
    getIPBackend();
})

function getIP() {
    console.log("before fetch");
    fetch('https://extreme-ip-lookup.com/json', {
    method: 'get'
    }).then((httpResponse) => {
        if (httpResponse.ok) {
        return httpResponse.json();
        }
    }).then((json) => {
        const ipaddress = json.query;
        const country = json.country;
        const city = json.city;
        console.log({ ipaddress , country , city}); //print your details here
    }).catch( (err) => {
        console.log(err); //print error on console
    });
}

706×192 18.8 KB

The console show “before fetch” in client side but not he rest of front end logs, and the logs of the backend function (which works ok)

I’m not sure If I missed something or it’s a kind of bug.
Do you know another way to get the client’s public IP?

5

Can you screenshot the code you are using on the page?

6

Sure

2130×1234 172 KB

7

I am facing exactly the same issue. Fetch fails with no error msgs. please help

8

It’s a Promise. So make sure to use await, (or .then() ) when you call it.