使用Vue.js获取用户的IP地址

Question

我的网站会查找不同的IP地址，以确定它们是否是已知的威胁。我要加一个由Vue.js链接的按钮，并在单击时将用户的IP地址推送到输入框中。

我一直很苦恼，因为无法获取用户的IP地址。

此外，我不想使用任何jQuery，因为每当我尝试使用它时都会出现错误。

这是我的JavaScript代码的精简版本：

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

调用它的HTML代码如下：

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

这里有一个链接指向我的网站，以便更容易理解我要做的事情：https://people.rit.edu/sns9181/igme330/Threat-Visualizer/

如果更方便的话，您可以通过右键点击并检查页面来查看我的全部代码。

- sonyansachdev

---

使用axios来消费问题xlm中提到的一个端点。 - Gavin Bruce

Answer 1

这个问题是关于JS和“如何在JS中获取客户端的IP”，而不是关于Vue的;)

但要说到重点： 您应该从某些API中获取IP，例如https://www.ipify.org/ 当您发送请求到https://api.ipify.org?format=json时，您将获得类似于以下JSON：

{"ip":"257.1.1.1"}

看这个

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

将其放入showYourIp方法中

- Milesq

---

请求的资源上不存在“Access-Control-Allow-Origin”标头。 - aswzen