Using Vue.js to get the user's IP Address [duplicate]

Question

My website looks up different IP Addresses to see if they are a known threat. I am putting a button in that is linked through Vue.js and on click, I want it to push the user's IP Address to the input box. I am having a lot of trouble trying to get the user's ip address.

In addition, I do not want any jquery since there is an error thrown whenever I try to use it.

This is an abridged version of my js code:

let app = new Vue({
    el: '#app',
    data: {
    term: localStorage.getItem("searchTerm")
    },
    methods: {
     showYourIP()
    {
      this.term = //User's IP Address
    }
}});

Html that calls it is:

<button class="button" id="yourIP" @click="showYourIP">Show Your IP</button>

Here is a link to my site so it's easier to understand what I'm trying to do: https://people.rit.edu/sns9181/igme330/Threat-Visualizer/

You can look through my whole code there by right clicking and inspecting the page if that is easier.

Use axios to consume one of the end points in the question xlm refered to. — Gavin Bruce
– Gavin Bruce, Commented Dec 17, 2019 at 21:53

Milesq · Accepted Answer · 2019-12-17 21:53:33Z

26

This question is about JS and "how get client's IP in JS", not about Vue ;)

But to the point: You should fetch ip from some api, eg https://www.ipify.org/ When you send request to https://api.ipify.org?format=json, you get JSON like that

{"ip":"257.1.1.1"}

Look at this

fetch('https://api.ipify.org?format=json')
.then(x => x.json())
.then(({ ip }) => {
    this.term = ip;
});

Put it into showYourIp method

answered Dec 17, 2019 at 21:53

Milesq

3683 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aswzen Over a year ago

i got No 'Access-Control-Allow-Origin' header is present on the requested resource.

Collectives™ on Stack Overflow

Using Vue.js to get the user's IP Address [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related