ローカルIPアドレスを取得する

1. まず、ローカル IP の取得に関するブラウザのセキュリティ制限を解除します (必須)。

1. Firefox:

浏览器输入 about:config

搜索配置 media.peerconnection.enabled 改为false ( 刷新程序,IP正常显示 )

2.グーグル

浏览器输入：chrome://flags/#enable-webrtc-hide-local-ips-with-mdns

把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 )

3. インターネットエクスプローラー


浏览器输入: edge://flags/#enable-webrtc-hide-local-ips-with-mdns

把 Anonymize local IPs exposed by WebRTC 设置为 disabled ( 刷新程序,IP正常显示 )

2. コード (直接コピーして貼り付け)

<template>
  <div id="ipAddress">
    <p>{
   
   {state}}</p>
  </div>
</template>
<script>
export default {
  //组件名称
  name: "ipAddress",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  created() {},
  data() {
    return {
      state: null,
    };
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },

  //监控data中的数据变化
  watch: {},
  methods: {
    init() {
      this.getIPs((ip) => {
        console.log("333ip", ip);
        this.state = ip;
      });
    },

    // 获取ip地址
    getIPs(onNewIP) {
      console.log("获取ip");
      let MyPeerConnection =
        window.RTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.webkitRTCPeerConnection;
      let pc = new MyPeerConnection({ iceServers: [] });
      let noop = function () {};
      let localIPs = {};
      let ipRegex =
        /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
      function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
      }
      pc.createDataChannel("");
      pc.createOffer()
        .then(function (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(function (reason) {
          // An error occurred, so handle the failure to connect
        });
      // seen for candidate events
      pc.onicecandidate = function (ice) {
        if (
          !ice ||
          !ice.candidate ||
          !ice.candidate.candidate ||
          !ice.candidate.candidate.match(ipRegex)
        )
          return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
      };
    },
  },
};
</script>

ps: 参照は、 vue project のフロントエンドからローカル IP を取得することです_フロントエンドから ip を取得する_Nasheng のブログ - CSDN ブログ

ローカルIPアドレスを取得する

1. まず、ローカル IP の取得に関するブラウザのセキュリティ制限を解除します (必須)。

1. Firefox:

2.グーグル

3. インターネットエクスプローラー

2. コード (直接コピーして貼り付け)

おすすめ