Extreme ip lookup error

Ask the community
,
1

Running the below code on a site page as most other have done and had success with already but i must be having a coders block. Cause in my case it seems it only want to be allowed on the edge browser.
Chrome gives error.
Firefox tells me its a cross issue.

Any one got any insight what i might be able to do to fix this situation ?
(Note, Yes i would normally move a fetch to backend but as this request need to be sent from the users browser to get their IP, moving it to the backend would give us the IP of the wix servers instead)

    try {
        return fetch('https://extreme-ip-lookup.com/json', {
                method: 'get'
            })
            .then((httpResponse) => {
                if (httpResponse.ok) {
                return httpResponse.json();
                }
            })
            .then((json) => {
                const ipaddress = json.query;
                console.log(ipaddress);
                return ipaddress;
            });
    } catch (error) {
        return "Error";
    }
1 Like
2

Hi @clsnlsen :raised_hand_with_fingers_splayed:

What’s the error you’re getting on Chrome?

There’s a solution to get the IP details on the backend, you need to send a fetch request to an endpoint on your site, then use the IP of the request to run a fetch on the backend.

// Frontend
return fetch('htpps://nasriya.net/_functions/getIP', { method: 'get' }).then(async (response) => {
    const res = await response.json();
    if (response.ok) {
        return Promise.resolve(res);
    } else {
        return Promise.reject(res);
    }
})

// http-functions.js - Backend

export function get_getIP(request) {
    const options = {
        headers: {
            'content-type': 'application/json',
            'Access-Control-Allow-Origin': 'https://nasriya.net/*'
        }
    }
    
    return fetch(`https://extreme-ip-lookup.com/json/${request.ip}`, { method: 'get' }).then(async (httpsResponse) => {
        if (httpsResponse.ok) {
            const json = await httpsResponse.json();
            options.body = json;
            return ok(options);
        } else {
            throw new Error('Fetch has failed!')
        }
    }).catch(err => {
        options.body = {
            type: 'error',
            error: err.toString();
        }
        
        return serverError(options);
    })
}

A link to your site and/or the error code will help us understand what went wrong.

Ahmad

3

There is no actual error. I believe i read somewhere that Chrome does not give anything else than “type Error: fetch failed” for Cross fails. Guess your solution there would make it work.
But im surprised how common the variant i use in this post of page code is used when it would not actually be functional.

4

@clsnlsen but the TypeError means you have an error in the syntax, I don’t think it has anything to do with CORS.

I’m using the same code on my website (https://nasriya.net) to get the IP address of the visitor, and it’s working for me.

One note on my solution, moving this fetch to your backend might get you limited by the 3rd party service as they allow x amount of requests for a given IP address in a given time, but if you don’t have much traffic then there’s nothing to worry about.