获取客户端的内网和外网的ip地址

需求分析：自己尝试做了一个视频播放的网页，想要在后台查看到用户访问的情况。所以想要获取客户端访问的ip地址。
1、其实网上已经有一些接口，我们访问就可以得到ip地址。如下图。

https://api.ipify.org?format=json

所以我们很轻易的就可以获取到客户端的ip地址。
使用方法也很简单。用axios即可
用vue脚手架新建一个项目，安装axios模块，修改以下代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>ip地址为：{{ ip }}</h1>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      ip:'',
    }
  },
  created(){
  //用axios访问接口获取ip地址
    axios.get('https://api.ipify.org/?format=json').then(data=>{
      console.log('data',data);
      this.ip = data.data.ip;
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行项目可以看到输出了ip地址

但是现在又有一个问题，因为我是在局域网内，可现在输出的却是代理ip，可我想要把局域网内的ip获取到。然后在网上发现了这个方法。
首先在public目录下新建一个production.min.js文件

function is_ipv4(d) {
    return regex_v4.test(d)
}
function is_ipv6(d) {
    return regex_v6.test(d)
}
// var simpleIPRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
let regex_v4 = /((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])/
    , regex_v6 = /((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))/
    , ip_regex_array = [regex_v6, regex_v4];
function peer(d) {
    var e, t = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    function n() {
        (e = new t({
            iceServers: [{
                urls: "stun:stun.l.google.com:19302"
            }]
        })).onicecandidate = (d => f(d)),
            e.createDataChannel("fake_data_channel")
    }
    function a() {
        return e.createOffer().then(d => e.setLocalDescription(d))
    }
    function f(e) {
        e && e.candidate && e.candidate.candidate && d(e && e.candidate && e.candidate.candidate)
    }
    return {
        start: function () {
            n(),
                a()
        },
        stop: function () {
            if (e)
                try {
                    e.close()
                } finally {
                    e.onicecandidate = (() => { }
                    ),
                        e = null
                }
        },
        createConnection: n,
        createStunRequest: a,
        handleCandidates: f
    }
}
function publicIPs(d) {
    if (d && d < 100)
        throw new Error("Custom timeout cannot be under 100 milliseconds.");
    var e = []
        , t = peer(function (d) {
            var t = [];
            for (let e of ip_regex_array) {
                let n = []
                    , a = e.exec(d);
                if (a) {
                    for (let d = 0; d < a.length; d++)
                        (is_ipv4(a[d]) || is_ipv6(a[d])) && n.push(a[d]);
                    t.push(n)
                }
            }
            !function (d) {
                e.includes(d) || e.push(n(d.flat(1 / 0)))
            }(t.flat(1 / 0))
        });
    function n(d) {
        return Array.from(new Set(d))
    }
    return new Promise(function (a, f) {
        t.start(),
            setTimeout(() => {
                e && e !== [] ? a(n(e.flat(1 / 0))) : f("No IP addresses were found."),
                    t.stop()
            }
                , d || 500)
    }
    )
}
function getIPTypes(d) {
    return new Promise(function (e, t) {
        let n = [];
        publicIPs(d).then(d => {
            d.forEach(d => {
                d.match(/^(192\.168\.|169\.254\.|10\.|172\.(1[6-9]|2\d|3[01]))/) ? n.push({
                    ip: d,
                    type: "private",
                    IPv4: !0
                }) : d.match(/((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))/) ? n.push({
                    ip: d,
                    type: "IPv6",
                    IPv4: !1
                }) : n.push({
                    ip: d,
                    type: "public",
                    IPv4: !0
                })
            }
            ),
                e(n)
        }
        ).catch(t)
    }
    )
}
export function getIPv4(d) {
    return getIPTypes(d).then(d => {
        const e = d.filter(d => d.IPv4);
        for (let d = 0; d < e.length; d++)
            e[d] = e[d].ip;
        return e || ""
    }
    )
}
export function getIPv6(d) {
    return getIPTypes(d).then(d => {
        const e = d.filter(d => "IPv6" === d.type);
        for (let d = 0; d < e.length; d++)
            e[d] = e[d].ip;
        return e ? e.ip : ""
    }
    )
}
export function getIPs(d) {
    return Object.assign(publicIPs(d), {
        types: getIPTypes,
        public: publicIPs,
        IPv4: getIPv4,
        IPv6: getIPv6
    })
}

然后在需要的地方引入使用即可

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>ip地址为：{{ ip }}</h1>
    <h1>局域网ip：{{ myip }}</h1>
  </div>
</template>

<script>
import axios from 'axios'
import { getIPv4 } from '../../public/production.min.js'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      ip: '',
      myip:''
    }
  },
  created() {
    axios.get('https://api.ipify.org/?format=json').then(data => {
      console.log('data', data);
      this.ip = data.data.ip;
    })
    getIPv4().then(response => {
      this.myip = response.join('\n')
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}</style>

从下图可以看到已经成功获取到了