使用 Vue.js 获取用户的 IP 地址 [重复]

Posted 2023-02-24

【中文标题】使用 Vue.js 获取用户的 IP 地址 [重复]

【英文标题】：Using Vue.js to get the user's IP Address [duplicate]

【发布时间】：2020-04-10 10:39:33

【问题描述】：

我的网站会查找不同的 IP 地址以查看它们是否是已知威胁。我正在放置一个通过 Vue.js 链接的按钮，单击时，我希望它将用户的 IP 地址推送到输入框。 我在尝试获取用户的 IP 地址时遇到了很多麻烦。

此外，我不想要任何 jquery，因为每当我尝试使用它时都会引发错误。

这是我的js代码的删减版：

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/

如果更容易的话，您可以通过右键单击并检查页面来查看我的整个代码。

【问题讨论】：

使用axios消费xlm所指问题中的端点之一。

【参考方案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方法

【讨论】：

我得到请求的资源上没有“Access-Control-Allow-Origin”标头。