前端獲取IP地址的方法總結(jié)

更新時間：2025年07月01日 10:12:38 作者：李喻涵

這篇文章主要介紹了前端獲取IP地址的四種方法：Vite配置、WebRTC、internal-ip插件及第三方API,并說明了各方法在不同環(huán)境下的適用性與限制,通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下

通過配置vite獲取IP地址

實(shí)現(xiàn)效果

實(shí)現(xiàn)方法

1、需要下載os插件

npm i os

2、獲取內(nèi)網(wǎng)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、配置環(huán)境變量（.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、該方法在線上環(huán)境中，并不能獲取到真實(shí)客戶端的IP地址。

2、在本地運(yùn)行的時候獲取到IP地址（就是運(yùn)行程序時的nextWork地址）。并且在其他的電腦，訪問運(yùn)行的項目鏈接的時候，獲取的仍是運(yùn)行前端項目的電腦的IP地址，并不是不同電腦獲取不同的IP地址。

利用WebRTC實(shí)現(xiàn)獲取內(nèi)網(wǎng)IP地址

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

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、使用該方法，在線上環(huán)境中，是可以獲取到客戶端IP地址的。（但是就是需要瀏覽器配置。）

2、需要在瀏覽器中，進(jìn)行配置才可以顯示IP地址。在不同的瀏覽器配置是不同的

3、例如：在谷歌瀏覽器中的進(jìn)入chrome://flags/地址將enable-webrtc-hide-local-ips-with-mdns的值為Disabled，才可以使用

利用插件的方式實(shí)現(xiàn)

使用internal-ip插件獲取內(nèi)網(wǎng)IP地址

1、官網(wǎng)地址 internal-ip

2、在使用該插件的時候，我的瀏覽器會彈出權(quán)限問題，只有在允許的情況下，才能獲取IP地址。

3、若不允許，則報錯不返回IP地址

使用第三方服務(wù)查詢公網(wǎng)IP地址

1、在有網(wǎng)絡(luò)的情況下，第三方API查詢IP地址的方式有很多，比如百度IP地址查詢，ifconfig.me、……

百度查詢Ip地址

ifconfig.me查詢IP地址

2、實(shí)現(xiàn)代碼

1）第三方服務(wù)API

import axios from 'axios'
// 利用百度第三方服務(wù)查詢到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()=>{
  // 第三方服務(wù)返回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、實(shí)現(xiàn)效果

4、關(guān)于為什么使用第三方API查詢出來的IP地址和本地的IPV4的地址不一樣？

兩者查詢出的IP不一致是因?yàn)椋汗W(wǎng)IP和私網(wǎng)IP

公網(wǎng)IP：是互聯(lián)網(wǎng)上唯一標(biāo)識設(shè)備的地址，允許設(shè)備直接與全球互聯(lián)網(wǎng)通信。它是公共地址，用于服務(wù)器或設(shè)備在互聯(lián)網(wǎng)上的唯一標(biāo)識。全球唯一，任何設(shè)備都可以通過互聯(lián)網(wǎng)訪問到它

私網(wǎng)IP：是局域網(wǎng)（LAN）內(nèi)部使用的地址，用于設(shè)備在局域網(wǎng)內(nèi)的通信。它無法直接在互聯(lián)網(wǎng)上訪問，通常由網(wǎng)絡(luò)管理員分配。僅在局域網(wǎng)內(nèi)有效，無法從互聯(lián)網(wǎng)直接訪問

以上就是前端獲取IP地址的方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于前端獲取IP地址的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: