js/vue 获取ipv4总结 |
您所在的位置：网站首页 › 当前本地ip地址 › js/vue 获取ipv4总结 |
js/vue 获取ipv4总结
|
问题：vue项目中需要获取用户的IPV4并传给后端 一、内网 1.在vue中我们可用借用node.js获取IPv4在 【config/index.js】 中 const os = require('os'); function getNetworkIp() { //获取当前IP地址 let needHost = ''; // 打开的host try { // 获得网络接口列表 let network = os.networkInterfaces(); for (let dev in network) { let iface = network[dev]; for (let i = 0; i < iface.length; i++) { let alias = iface[i]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { needHost = alias.address; } } } } catch (e) { console.log("*",e); needHost = '127.0.0.1'; } return needHost; }但此方法有一个问题。在 node 环境中我们使用不了 window，无法将它保存到 sessionStorage 里去，所以 module.exports = { dev: { // ... host: getNetworkIp(), // ... } }在需要的地方调用 window.location.host 那么问题又来了，我们是从路径上截取到的ipv4。也就是说当我使用 127.0.0.1 或者 localhost 登录时，这ipv4就不对了，如果部署上线的话... 参考文献：https://dongkelun.com/2019/03/28/vueAutoIp... 2. js/vue 获取本地ipv4法一： function getLocalIPv4(){ //获取本机IPv4 if(typeof window != 'undefined'){ var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; if (RTCPeerConnection) (()=>{ var rtc = new RTCPeerConnection() rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道 rtc.createOffer( offerDesc => { //创建并存储一个sdp数据 rtc.setLocalDescription(offerDesc) }, e => { console.log(e)}) rtc.onicecandidate =(evt) => { //监听candidate事件 if (evt.candidate) { // console.log('evt:',evt.candidate) let ip_rule = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/ let ip_addr = ip_rule.exec(evt.candidate.candidate) if (ip_addr) { sessionStorage.setItem("ip",ip_addr[1]) // 保存 本机IP } // console.log('ip_addr:',ip_addr) //打印获取的IP地址 } } })() else{console.log("没有找到")} } } getLocalIPv4()法二： function getUserIP(onNewIP) { let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; let pc = new MyPeerConnection({ iceServers: [] }); let noop = () => { }; 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; let iterateIP = (ip) => { if (!localIPs[ip]) onNewIP(ip); localIPs[ip] = true; }; pc.createDataChannel(''); pc.createOffer().then((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((reason) => { }); pc.onicecandidate = (ice) => { if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return; ice.candidate.candidate.match(ipRegex).forEach(iterateIP); }; } getUserIP((ip) => { //注意：有的浏览器获取到的是IPv4地址，有的是IPv6地址 console.log("ip",ip); })如果获取不到，可能是浏览器隐藏了ip 谷歌(Chrome) 删除隐藏IP 浏览器输入：chrome://flags/#enable-webrtc-hide-local-ips-with-mdns 把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 ) 火狐(FireFox) 删除隐藏IP 浏览器输入 about:config 搜索配置 media.peerconnection.enabled 改为false ( 刷新程序,IP正常显示 ) 二、外网如果是vue项目：在文件夹中 index.html 加如下代码：（注：此处使用的是搜狐接口） console.log(`您的ip是${returnCitySN.cip}您的所在地是${returnCitySN.cname}`); console.log(returnCitySN); sessionStorage.setItem('cip', returnCitySN["cip"]) // 保存cip地址 三、讨论2023/7/10 --- 新增 是的，在开发过程中，我们不可能要求每一位用户给自己的浏览器开放ip权限。 而【config/index.js】文件又处于node环境中，没有Windows对象也没有vue环境，所以我想到了另一种方式将ip传给vue--跨域。 1.在【vue.config.js】文件中配置跨域 const { defineConfig } = require('@vue/cli-service') const os = require('os'); function getNetworkIp() { //获取当前IP地址 let needHost = ''; // 打开的host try { // 获得网络接口列表 let network = os.networkInterfaces(); for (let dev in network) { let iface = network[dev]; for (let i = 0; i < iface.length; i++) { let alias = iface[i]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { needHost = alias.address; } } } } catch (e) { console.log("*",e); needHost = '127.0.0.1'; } return needHost; } module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { '/api': { // 配置其他跨域 }, // 获取ipv4 '/getIP': { target: 'http://' + getNetworkIp(), ws: false, changeOrigin: true }, } }, })2.在其他页面调用 因为我们代理目标的基础路径不存在，所以它是一定会报错的。而ip就藏在这错误信息中，最好再用Axios拦截器(Interceptors)统一格式。 import axios from "axios" export default { mounted () { axios.get("http://localhost:8080/getIP") .catch(e=>{ console.log(e.response.data); }) } }3.查看控制台打印
接下来只需要字符串截取一下就能拿到ipv4了。 2023/7/11 --- 新增 4. 测试 在本机上测试是没有问题的，但是当我换了台电脑测时，发现跨域的错误信息中缺少了一个关键的参数 response。 既然在前端不放便将获取到的ip传给vue，那么我想到了后端。我们先以 查询字符串 的形式将ip传给后端，再由后端返回如何？当然，如果后端能直接获取到客户端ip地址，这就有点...多次一举了。 配置跨域： proxy: { '/getIP': { target: `http://localhost:3000/ip` // 服务器请求地址 +`?ip=`+ getNetworkIp(), // 查询字符串 ws: false, changeOrigin: true, }, }控制台打印：
如果你有什么意见或者建议也欢迎给我留言，谢谢。 |
【本文地址】
今日新闻 |
推荐新闻 |