How to get client ip adress without adblock blocking api request in production

Issue

I'm using an Angular/Firebase app and using this request to get the user's IP address

async getIp() {
    const resp = await fetch('https://jsonip.com', { mode: 'cors' });
    return await resp.json();
   }

Here's the error I'm getting:

GET https://jsonip.com/ net::ERR_BLOCKED_BY_CLIENT

When disabling Adblock it's working, but I need another alternative for people using AdBlock and I couldn't find any on google.

Solution

Thanks to @T.Aoukar for the hint I managed to get the IP by creating a callable cloud function to return the user's IP address.

Here's the code it might help:

export const getIP = functions.region("europe-west1").https.onCall( (data, context) => {
    const ip = context.rawRequest.ip;
    console.log('IP HERE',ip)
   return ip;
});


this.fns.httpsCallable("getIP")({ text: "Some Argument" })
        .toPromise()
        .then((resp) => {
          this.userIp = resp;
        })
        .catch((err) => {
          console.error({ err });
        });

Answered By - Astrocode