vue中获取外网IP的方法

本文介绍了在Vue项目中如何获取客户端的公网IP地址。通过创建一个名为`outerNetIp.vue`的组件,利用远程JS加载实现。在组件模板中插入<script>标签,并在页面中引用该组件,然后在方法中解析返回的IP信息。这种方法适用于Vue项目的公网IP获取。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

记一下如何在vue项目中获取外网IP

之前有篇文章js获取客户端真实IP记录了如何获取外网IP
那个只是在普通html页面当中的获取方法,在vue项目中就不能这么使用了。

这里介绍一种适用于vue项目的公网IP获取方法
1.components公共组件目录下新建组件outerNetIp.vue用于获取IP

<template>
  <remote-js :src="src"></remote-js>
</template>
<script>
export default {
  name: 'OuterIp',
  data() {
    return {
      src: ''
    }
  },
  components: {
    'remote-js': {
      render(createElement) {
        return createElement('script', {
          attrs: { type: 'text/javascript', src: this.src || 'http://pv.sohu.com/cityjson?ie=utf-8' }
        })
      },
      props: {
        src: { type: String, required: true }
      }
    }
  }
}
</script>

2.页面vue文件中引用组件

<template>
<div>
    ...
    <outer-ip :src="ipUrl"></outer-ip>
    ...
</div>
</template>

<script>
import outerIp from '@/components/outerNetIp.vue'

export default {
    ...
    components: {
        outerIp
    },
    ...
}
</script>

3.methods方法中获取IP即可

...
methods: {
    onClick() {
        let ip = returnCitySN['cip']
    }
}
...

以上。

### 实现 Vue3 中获取客户端本地 IP 地址 在现代浏览器的安全策略下,直接通过 JavaScript 前端代码获取本机 IP 地址存在一定的限制。然而,可以利用 WebRTC 技术绕过这一限制并实现目标功能[^1]。 以下是基于 WebRTC 的具体实现方案: #### 使用 WebRTC 获取本地 IP 地址 WebRTC 是一种实时通信协议,能够暴露设备的网络接口信息,从而允许开发者捕获用户的内网和外网 IP 地址[^3]。 ```javascript function getLocalIPs(callback) { const ips = []; const peerConnection = new RTCPeerConnection({ iceServers: [] }); peerConnection.createDataChannel(''); peerConnection.onicecandidate = function(event) { if (event.candidate && event.candidate.candidate) { let candidate = event.candidate.candidate; let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4})+)/gi; let match = ipRegex.exec(candidate); while(match !== null){ ips.push(match[0]); match = ipRegex.exec(candidate); } } }; peerConnection.createOffer().then(offer => { return peerConnection.setLocalDescription(offer); }).catch(error => console.error('Error creating offer:', error)); setTimeout(() => callback(ips), 1000); // Wait a bit to gather candidates } ``` 此函数会尝试创建一个 `RTCPeerConnection` 对象并通过其 ICE 协商机制收集候选者中的 IP 地址。 #### 将其实现到 Vue3 组件中 为了将上述逻辑集成到 Vue3 应用中,可以在组件的 `setup()` 函数或者组合式 API 中调用该方法,并将其结果绑定至模板数据。 ```vue <template> <div> <p>您的本地 IP 地址:</p> <ul> <li v-for="(ip, index) in localIps" :key="index">{{ ip }}</li> </ul> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const localIps = ref([]); function getLocalIPs(callback) { const ips = []; const peerConnection = new RTCPeerConnection({ iceServers: [] }); peerConnection.createDataChannel(''); peerConnection.onicecandidate = function(event) { if (event.candidate && event.candidate.candidate) { let candidate = event.candidate.candidate; let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4})+)/gi; let match = ipRegex.exec(candidate); while (match !== null) { ips.push(match[0]); match = ipRegex.exec(candidate); } } }; peerConnection.createOffer() .then((offer) => peerConnection.setLocalDescription(offer)) .catch((error) => console.error('Error creating offer:', error)); setTimeout(() => callback(ips), 1000); // Wait a bit to gather candidates } getLocalIPs((result) => { localIps.value = [...new Set(result)]; // Remove duplicates and set the result. }); return { localIps }; }, }; </script> ``` 以上代码展示了如何在 Vue3 中使用 WebRTC 来获取本地 IP 地址列表,并动态渲染到页面上。 需要注意的是,某些浏览器可能默认禁用了 WebRTC 泄露本地 IP 功能。在这种情况下,需调整设置或将选项 **Anonymize local IPs exposed by WebRTC** 设为 Disabled[^4]。 --- ### 注意事项 尽管 WebRTC 提供了一种有效的方式来获取本地 IP 地址,但也带来了隐私风险。因此,在实际应用中应谨慎处理此类敏感信息,并遵循相关法律法规保护用户隐私。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薛定喵君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值