在vue中获取用户IP，并传给后端

背景

由于公司功能需要，要在axios发送请求时将访问者的ip地址放在头部传递

步骤

第一步：需要修改 chrome 浏览器的配置：

1、在chrome 浏览器地址栏中输入：chrome://flags/
2、搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为disabled
3、点击relaunch 浏览器即可查看到本机的内网IP地址

第二步：在代码中编写该方法

// 获取客户端IP
getUserIP(onNewIP) {
  const MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
  const pc = new MyPeerConnection({
    iceServers: []
  })
  const noop = () => {
  }
  const localIPs = {}
  const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g
  const 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)
  }
}

第三步：在代码中调用该方法

// 获取ip
getUserIP((ip) => {
  console.log('获取ip', ip)
})

获取本机IP并在vue.config.js中配置

第一步：util/tools.js 中编写该方法

// 获取本机电脑IP
getIPAddress() {
  const interfaces = os
  for (const devName in interfaces) {
    const iface = interfaces[devName]
    for (let i = 0; i < iface.length; i++) {
      const alias = iface[i]
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        console.log('---->', alias.address)
        return alias.address
      }
    }
  }
}

第二步：在vue.config.js中直接调用该方法并按自己的需求配置

获取公网IP

第一步：在index.html中添加搜狐接口

<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

第二步：获取returnCitySN

console.log('returnCitySN', returnCitySN)
// returnCitySN {cip: '222.244.145.59', cid: '430100', cname: '湖南省长沙市'}