目录
一、首先要解除浏览器获取本机IP的安全限制(必须要做的事)
1. 火狐:
浏览器输入 about:config
搜索配置 media.peerconnection.enabled 改为false ( 刷新程序,IP正常显示 )
2. 谷歌
浏览器输入:chrome://flags/#enable-webrtc-hide-local-ips-with-mdns
把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 )
3. IE浏览器
浏览器输入: edge://flags/#enable-webrtc-hide-local-ips-with-mdns
把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 )
二、 代码 (直接复制粘贴即可)
<template>
<div id="ipAddress">
<p>{
{state}}</p>
</div>
</template>
<script>
export default {
//组件名称
name: "ipAddress",
//import引入的组件需要注入到对象中才能使用
components: {},
created() {},
data() {
return {
state: null,
};
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
this.init();
},
//监控data中的数据变化
watch: {},
methods: {
init() {
this.getIPs((ip) => {
console.log("333ip", ip);
this.state = ip;
});
},
// 获取ip地址
getIPs(onNewIP) {
console.log("获取ip");
let MyPeerConnection =
window.RTCPeerConnection ||
window.mozRTCPeerConnection ||
window.webkitRTCPeerConnection;
let pc = new MyPeerConnection({ iceServers: [] });
let noop = function () {};
let localIPs = {};
let ipRegex =
/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
function iterateIP(ip) {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
}
pc.createDataChannel("");
pc.createOffer()
.then(function (sdp) {
sdp.sdp.split("\n").forEach(function (line) {
if (line.indexOf("candidate") < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
})
.catch(function (reason) {
// An error occurred, so handle the failure to connect
});
// seen for candidate events
pc.onicecandidate = function (ice) {
if (
!ice ||
!ice.candidate ||
!ice.candidate.candidate ||
!ice.candidate.candidate.match(ipRegex)
)
return;
ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};
},
},
};
</script>
ps : 借鉴的是 vue项目前端获取本机IP_前端获取ip_呢笙的博客-CSDN博客