在Vue.js项目中如何获取用户的内网IP地址？

原有方案失效原因 #

• 你调用的搜狐城市IP接口是公网IP查询接口，返回的是用户网络出口的公网IP，本身就无法获取内网地址
• 你用的RTCPeerConnection方案没生效大概率是两个原因：
  1. 现代浏览器默认开启了WebRTC IP隐藏策略，会默认屏蔽内网IP暴露，需要用户在浏览器设置里开启对应权限，或者站点是HTTPS/localhost本地环境
  2. 原有代码缺少异常捕获和超时兜底，部分低版本浏览器不支持RTCPeerConnection会静默失败

修复后的可用实现代码 #

注意：只有站点部署在localhost本地环境或者HTTPS环境下，该方案才能正常生效，HTTP公网站点现在绝大多数浏览器都会默认阻止暴露内网IP。

// Vue方法封装
methods: {
  async getLocalIP() {
    return new Promise((resolve, reject) => {
      // 兼容浏览器前缀
      const PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
      if (!PeerConnection) {
        return reject(new Error('当前浏览器不支持IP获取功能'))
      }
      const pc = new PeerConnection({ iceServers: [] })
      const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/g
      const localIPs = new Set()

      pc.createDataChannel('')
      pc.createOffer()
        .then(sdp => {
          pc.setLocalDescription(sdp)
          // 从SDP中提取IP
          const lines = sdp.sdp.split('\n')
          lines.forEach(line => {
            if (line.includes('candidate')) {
              const ips = line.match(ipRegex)
              ips?.forEach(ip => {
                // 过滤掉环回地址
                if (ip !== '127.0.0.1' && !localIPs.has(ip)) {
                  localIPs.add(ip)
                  resolve(ip)
                }
              })
            }
          })
        })
        .catch(err => reject(err))

      // 监听ICE候选事件兜底获取
      pc.onicecandidate = (e) => {
        if (!e.candidate) return
        const ips = e.candidate.candidate.match(ipRegex)
        ips?.forEach(ip => {
          if (ip !== '127.0.0.1' && !localIPs.has(ip)) {
            localIPs.add(ip)
            resolve(ip)
          }
        })
      }

      // 超时兜底
      setTimeout(() => {
        if (localIPs.size === 0) {
          reject(new Error('获取内网IP失败，请检查浏览器权限设置'))
        }
      }, 1000)
    })
  },

  // 调用示例
  async fetchIP() {
    try {
      this.remoteIp = await this.getLocalIP()
      console.log('内网IP：', this.remoteIp)
    } catch (err) {
      console.error(err.message)
      // 失败可以给用户提示手动输入
    }
  }
}

注意事项 #

• Chrome浏览器如果要在非本地/HTTPS环境测试，需要先在地址栏输入chrome://flags/#enable-webrtc-hide-local-ips-with-mdns，把对应选项改成Disabled后重启浏览器生效
• 该方案仅适用于内网系统场景，公网站点无法强制用户修改浏览器设置，不推荐使用
• 如果是内网部署的系统，可以直接在后端层获取用户内网IP，不需要前端获取，稳定性更高

内容的提问来源于stack exchange，提问作者user16043351