前端获取IP地址方法总结

通过配置vite获取IP地址

实现效果

实现方法

1、需要下载os插件

npm i os

2、获取内网IP地址的方法

import os from 'os';
export function getNetworkIp() {
  let needHost = '';
  try {
    const network = os.networkInterfaces();
    for (const dev in network) {
      const iface = network[dev];
      if (iface) { 
        for (let i = 0; i < iface.length; i++) {
          const alias = iface[i];
          if (
            alias.family === 'IPv4' &&
            alias.address !== '127.0.0.1' &&
            !alias.internal
          ) {
            needHost = alias.address;
          }
        }
      }
    }
  } catch (e) {
    needHost = 'localhost';
  }
  return needHost;
}

3、配置环境变量（.env.XX）

BASE_IP=""
BASE_IP_URL=""

4、配置vite.config.ts 文件

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import {getNetworkIp} from './src/utils/getIpos'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 使用@
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  define: {
    'import.meta.env.BASE_IP_URL': JSON.stringify(`http://${getNetworkIp()}:${process.env.PORT || 3000}`),
    'import.meta.env.BASE_IP': JSON.stringify(`${getNetworkIp()}`),

  },

})

5、在vue文件中使用

<script setup lang='ts'>
const baseIP = import.meta.env.BASE_IP;
const baseIPURL = import.meta.env.BASE_IP_URL;
</script>

<template>
  <div>
   <div>地址为:{{ baseIPURL }}</div>
   <div>IP地址为:{{ baseIP }}</div>
  </div>
</template>

<style lang='scss' scoped>

</style>

注意：

1、该方法在线上环境中，并不能获取到真实客户端的IP地址。

2、在本地运行的时候获取到IP地址（就是运行程序时的nextWork地址）。并且在其他的电脑，访问运行的项目链接的时候，获取的仍是运行前端项目的电脑的IP地址，并不是不同电脑获取不同的IP地址。

利用WebRTC实现获取内网IP地址

实现效果

实现代码

1、获取IP地址的方法

export function getUserIP(callback) {
  const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
  if (!RTCPeerConnection) {
    callback('Not compatible with WebRTC');
    return;
  }

  const pc = new RTCPeerConnection({ iceServers: [] });
  const noop = () => {};

  pc.createDataChannel('');
  pc.createOffer().then(sdp => pc.setLocalDescription(sdp)).catch(noop);

  pc.onicecandidate = ice => {
    if (!ice || !ice.candidate || !ice.candidate.candidate) return;
    const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
    const ipMatch = ice.candidate.candidate.match(ipRegex);
    if (ipMatch) {
      callback(ipMatch[1]);
      pc.close();
    }
  };
}

2、在vue文件中使用

<script setup lang='ts'>
import {ref} from 'vue'
import {getUserIP} from '@/utils/getIpWebRTC.js'
let getip=ref('')
getUserIP(ip => {
  getip.value=ip
  console.log('User IP:', ip);
});
const baseIP = import.meta.env.BASE_IP;
const baseIPURL = import.meta.env.BASE_IP_URL;
</script>
<template>
  <div>
   <div>地址为:{{ baseIPURL }}</div>
   <div>IP地址为:{{ baseIP }}</div>
   <div>WebRTC IP地址为:{{ getip }}</div>

  </div>
</template>

<style lang='scss' scoped>

</style>

注意

1、使用该方法，在线上环境中，是可以获取到客户端IP地址的。（但是就是需要浏览器配置。）

 2、需要在浏览器中，进行配置才可以显示IP地址。在不同的浏览器配置是不同的

 3、例如：在谷歌浏览器中的进入chrome://flags/地址将enable-webrtc-hide-local-ips-with-mdns的值为Disabled，才可以使用

利用插件的方式实现

使用internal-ip插件获取内网IP地址

1、官网地址 internal-ip

2、在使用该插件的时候，我的浏览器会弹出权限问题，只有在允许的情况下，才能获取IP地址。

3、若不允许，则报错不返回IP地址

使用第三方服务查询公网IP地址 

1、在有网络的情况下，第三方API查询IP地址的方式有很多，比如百度IP地址查询，ifconfig.me、……

百度查询Ip地址

ifconfig.me查询IP地址

 2、实现代码

1）第三方服务API

import axios from 'axios'
// 利用百度第三方服务查询到IP地址
export const BaiduAPIgetIp = async () => {
  const response = await axios('https://qifu-api.baidubce.com/ip/local/geo/v1/district');
  console.log(response,'BaiduAPIgetIp')
  if(response&&response.data.code=='Success'){
    return response.data.ip
  }else{
    return ''
  }
}
// 使用ipinfo.io查询IP地址
export const getIpinfo = async () => {
  const response = await axios('https://ipinfo.io/ip');
  return response.data||''
}
// 使用ifconfig查询IP地址
export const getifconfig = async () => {
  const response = await axios('https://ifconfig.me/');
    return response.data||''
}
//使用ipify.io查询IP地址（测试的时候，这接口没有返回）
export const getIpify = async () => {
  const response = await axios('https://api64.ipify.org?format=json');
}

2）在vue页面中使用

<script setup lang='ts'>
import {ref,onMounted} from 'vue'
import {getUserIP} from '@/utils/getIpWebRTC.js'
import {BaiduAPIgetIp,getIpify,getIpinfo,getifconfig} from '@/utils/getIpApi.js'
let getip=ref('')
getUserIP(ip => {
  getip.value=ip
});

const baseIP = import.meta.env.BASE_IP;
const baseIPURL = import.meta.env.BASE_IP_URL;
let baiduIp=ref('')
let Ipify=ref('')
let Ipinfo=ref('')
let ifconfig=ref('')
  
onMounted(async()=>{
  // 第三方服务返回IP地址"124.64.23.233"？
  baiduIp.value=await BaiduAPIgetIp()
  // Ipify.value=await getIpify()
  Ipinfo.value=await getIpinfo()
  ifconfig.value=await getifconfig()
})

</script>
<template>
  <div>
   <div>地址为:{{ baseIPURL }}</div>
   <div>IP地址为:{{ baseIP }}</div>
   <div>WebRTC IP地址为:{{ getip }}</div>
   <div>BaiduAPI IP地址为:{{ baiduIp }}</div>
   <div>Ipify IP地址为:{{ Ipify }}</div>
   <div>ipinfo IP地址为:{{ Ipinfo }}</div>
   <div>ifconfig IP地址为:{{ ifconfig }}</div
  </div>
</template>
<style lang='scss' scoped>

</style>

 3、实现效果

4、关于为什么使用第三方API查询出来的IP地址和本地的IPV4的地址不一样？

两者查询出的IP不一致是因为：公网IP和私网IP

公网IP：是互联网上唯一标识设备的地址，允许设备直接与全球互联网通信。它是公共地址，用于服务器或设备在互联网上的唯一标识。全球唯一，任何设备都可以通过互联网访问到它

私网IP：是局域网（LAN）内部使用的地址，用于设备在局域网内的通信。它无法直接在互联网上访问，通常由网络管理员分配。仅在局域网内有效，无法从互联网直接访问