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