前端獲取IP地址的方法總結(jié)
通過配置vite獲取IP地址
實現(xiàn)效果
實現(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)境中，并不能獲取到真實客戶端的IP地址。
2、在本地運(yùn)行的時候獲取到IP地址（就是運(yùn)行程序時的nextWork地址）。并且在其他的電腦，訪問運(yùn)行的項目鏈接的時候，獲取的仍是運(yùn)行前端項目的電腦的IP地址，并不是不同電腦獲取不同的IP地址。
利用WebRTC實現(xiàn)獲取內(nèi)網(wǎng)IP地址
實現(xiàn)效果
實現(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，才可以使用
利用插件的方式實現(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、實現(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、實現(xiàn)效果
4、關(guān)于為什么使用第三方API查詢出來的IP地址和本地的IPV4的地址不一樣？
兩者查詢出的IP不一致是因為：公網(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)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)的輪播效果，通過改變圖片的透明度來實現(xiàn)輪播的效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript排序算法動畫演示效果的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avaScript排序算法動畫演示效果的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
window onload加載多個同時使用，想必有很多人沒有用過吧，接下來為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下2013-04-04
JavaScript高級程序設(shè)計閱讀筆記（五） ECMAScript中的運(yùn)算符（一）
ECMAScript中的運(yùn)算符，學(xué)習(xí)js的朋友可以看看2012-02-02
理解Javascript_07_理解instanceof實現(xiàn)原理
在《Javascript類型檢測》一文中講到了用instanceof來用做檢測類型，讓我們來回顧一下2010-10-10
一個可以得到元素真實的背景顏色的javascript腳本...2007-07-07
全面兼容的javascript時間格式化函數(shù)(比較實用)
這篇文章主要介紹了全面兼容比較實用的javascript時間格式化函數(shù),需要的朋友可以參考下2014-05-05![JScript|Event]面向事件驅(qū)動的編程(二)--實例講解:將span模擬成超連接](http://img.jbzj.com/images/xgimg/bcimg7.png)
JScript|Event]面向事件驅(qū)動的編程(二)--實例講解:將span模擬成超連接
JScript|Event]面向事件驅(qū)動的編程(二)--實例講解:將span模擬成超連接...2007-01-01
這篇文章主要為大家詳細(xì)介紹了js編寫簡易的計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
七個基于JavaScript實現(xiàn)的情人節(jié)表白特效
情人節(jié)將至 程序員證明自己不是直男的時候到啦 我們也有自己的專屬代碼浪漫。本文將介紹七個利用JavaScript實現(xiàn)的情人節(jié)表白特效，需要的可以參考一下2022-01-01