首先要解除浏览器获取本机IP的安全限制
火狐(FireFox) 删除隐藏IP
浏览器输入 about:config
搜索配置 media.peerconnection.enabled 改为false ( 刷新程序,IP正常显示 )
谷歌(Chrome) 删除隐藏IP
浏览器输入:chrome://flags/#enable-webrtc-hide-local-ips-with-mdns
把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 )文章来源:https://www.toymoban.com/news/detail-479252.html
edge浏览器删除隐藏ip
浏览器输入: edge://flags/#enable-webrtc-hide-local-ips-with-mdns
把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 )
备注
1.设置完成后要重启浏览器
2.若没有查到相对应的设置,请检查浏览器版本更新文章来源地址https://www.toymoban.com/news/detail-479252.html
methods方法
// 获取ip地址
getUserIP(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)
}
},
在created中调用获取IP的方法
var _that = this
this.getUserIP(function(ip){
console.log("得到的本地IP :" + ip) // 得到的本地IP :192.168.21.23
console.log(_that.loginForm)
_that.loginForm.userIP = ip //这里不能用this 因为this指向的是这个回调函数的this
})
到了这里,关于vue项目前端获取本机IP的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!