vue获取内外网ip地址
1.获取外网ip
2.获取内网ip
首先应该设置浏览器设置,因为浏览器会默认阻止用户获取本地ip
谷歌浏览器:地址栏输入chrome://flags/#enable-webrtc-hide-local-ips-with-mdns,找到Anonymize local IPs exposed by WebRTC.
修改成上图即可,然后重启浏览器。
然后代码中写入方法:
getIPs() {
let _this = this;
var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
if (RTCPeerConnection) (function () {
var rtc = new RTCPeerConnection({iceServers:[]});
if (1 || window.mozRTCPeerConnection) {
rtc.createDataChannel(‘’, {reliable:false});
};
rtc.onicecandidate = function (evt) {
if (evt.candidate) grepSDP("a="+evt.candidate.candidate);
};
rtc.createOffer(function (offerDesc) {
grepSDP(offerDesc.sdp);
rtc.setLocalDescription(offerDesc);
}, function (e) { console.warn("offer failed", e); });
var addrs = Object.create(null);
addrs["0.0.0.0"] = false;
function updateDisplay(newAddr) {
if (newAddr in addrs) return;
else addrs[newAddr] = true;
var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; });
for(var i = 0; i < displayAddrs.length; i++){
if(displayAddrs[i].length > 16){
displayAddrs.splice(i, 1);
i--;
}
}
console.log('内网ip',displayAddrs[0]); //打印出内网ip
_this.$cookie.set('ip', displayAddrs[0])
// _this.user.ip_in = displayAddrs[0];//获取内网ip
}
function grepSDP(sdp) {
var hosts = [];
sdp.split('\r\n').forEach(function (line, index, arr) {
if (~line.indexOf("a=candidate")) {
var parts = line.split(' '),
addr = parts[4],
type = parts[7];
if (type === 'host') updateDisplay(addr);
} else if (~line.indexOf("c=")) {
var parts = line.split(' '),
addr = parts[2];
updateDisplay(addr);
}
});
}
})();
else{
console.log(“请使用主流浏览器:chrome,firefox,opera,safari”);
}
},
然后再调用。我这里是直接存在cookie中,所以直接执行方法,然后再要是用的地方直接获取所存的cookie即可。
this.getIPs()
let ip = this.$cookie.get(‘ip’)
注意:每个浏览器的ip权限设置有可能不同,本人用的谷歌浏览器,所以本文只有谷歌的设置,其他浏览器的设置方法可以自行百度,或者自行研究。
转载自:https://blog.csdn.net/zhjyyw/article/details/125895907
获取本地IP地址
IP地址需要通过js获取:
网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的:
http://pv.sohu.com/cityjson?ie=utf-8
1、在浏览器中
直接输入这个地址,就可以获取到ip信息:
在这里插入图片描述
2、在vue文件中,实现如下
(1)在config/index.js中 proxyTable:{ } ,在里面添加代理规则
‘/api’: {
target: ‘http://pv.sohu.com’,//这里是域名,不是完整地址
changeOrigin: true,//是否跨域
pathRewrite: {
‘^/api’: ‘’
}
}
target: 'http://'接口的域名,注意这里是域名,不是完整的ip;
secure: false, // 如果是https接口,需要配置这个参数;
changeOrigin:true,// 如果接口跨域,需要进行这个参数配置;
注意:
‘/api’ 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 ‘/api’,而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀,就可以把 pathRewrite 删掉。
(2)具体使用,我在里是用已经封装好的axios
(3)此处获取到的地址为外网地址:
获取本地内网IP
在项目的config/index.js下插入代码
const os = require(‘os’);
function getNetworkIp() {
let needHost = ‘’; // 打开的host
try {
// 获得网络接口列表
let network = os.networkInterfaces();
// console.log(“network”,network)
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;
// console.log("alias.address",alias.address)
}
// console.log("alias",alias)
}
}
} catch (e) {
needHost = 'localhost';
}
return needHost;
}
把host按照下图修改:
最后,在需要拿到ip的主页中插入以下代码:
var ip = window.location.host;
console.log(“ip”,ip.split(“:”)[0])
转载自:https://www.qb5200.com/article/483669.html