前端获取IP地点方法总结

通过设置vite获取IP地点

实现结果

   

  实现方法

1、需要下载os插件

1. npm i os

复制代码

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

1. import os from 'os';
2. export function getNetworkIp() {
3.   let needHost = '';
4.   try {
5.     const network = os.networkInterfaces();
6.     for (const dev in network) {
7.       const iface = network[dev];
8.       if (iface) {
9.         for (let i = 0; i < iface.length; i++) {
10.           const alias = iface[i];
11.           if (
12.             alias.family === 'IPv4' &&
13.             alias.address !== '127.0.0.1' &&
14.             !alias.internal
15.           ) {
16.             needHost = alias.address;
17.           }
18.         }
19.       }
20.     }
21.   } catch (e) {
22.     needHost = 'localhost';
23.   }
24.   return needHost;
25. }

复制代码

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

1. BASE_IP=""
2. BASE_IP_URL=""

复制代码

4、设置vite.config.ts 文件

1. import { defineConfig } from 'vite'
2. import { fileURLToPath, URL } from 'node:url'
3. import vue from '@vitejs/plugin-vue'
4. import {getNetworkIp} from './src/utils/getIpos'
5. // https://vite.dev/config/
6. export default defineConfig({
7.   plugins: [vue()],
8.   // 使用@
9.   resolve: {
10.     alias: {
11.       '@': fileURLToPath(new URL('./src', import.meta.url))
12.     }
13.   },
14.   define: {
15.     'import.meta.env.BASE_IP_URL': JSON.stringify(`http://${getNetworkIp()}:${process.env.PORT || 3000}`),
16.     'import.meta.env.BASE_IP': JSON.stringify(`${getNetworkIp()}`),
18.   },
20. })

复制代码

5、在vue文件中使用

1. <script setup lang='ts'>
2. const baseIP = import.meta.env.BASE_IP;
3. const baseIPURL = import.meta.env.BASE_IP_URL;
4. </script>
6. <template>
7.   <div>
8.    <div>地址为:{{ baseIPURL }}</div>
9.    <div>IP地址为:{{ baseIP }}</div>
10.   </div>
11. </template>
13. <style lang='scss' scoped>
15. </style>

复制代码

  注意：
  1、该方法在线上环境中，并不能获取到真实客户端的IP地点。
  2、在本地运行的时候获取到IP地点（就是运行程序时的nextWork地点）。并且在其他的电脑，访问运行的项目链接的时候，获取的仍是运行前端项目标电脑的IP地点，并不是差别电脑获取差别的IP地点。
  利用WebRTC实现获取内网IP地点

实现结果

   

  实今世码

1、获取IP地点的方法

1. export function getUserIP(callback) {
2.   const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
3.   if (!RTCPeerConnection) {
4.     callback('Not compatible with WebRTC');
5.     return;
6.   }
8.   const pc = new RTCPeerConnection({ iceServers: [] });
9.   const noop = () => {};
11.   pc.createDataChannel('');
12.   pc.createOffer().then(sdp => pc.setLocalDescription(sdp)).catch(noop);
14.   pc.onicecandidate = ice => {
15.     if (!ice || !ice.candidate || !ice.candidate.candidate) return;
16.     const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
17.     const ipMatch = ice.candidate.candidate.match(ipRegex);
18.     if (ipMatch) {
19.       callback(ipMatch[1]);
20.       pc.close();
21.     }
22.   };
23. }

复制代码

2、在vue文件中使用

1. <script setup lang='ts'>
2. import {ref} from 'vue'
3. import {getUserIP} from '@/utils/getIpWebRTC.js'
4. let getip=ref('')
5. getUserIP(ip => {
6.   getip.value=ip
7.   console.log('User IP:', ip);
8. });
9. const baseIP = import.meta.env.BASE_IP;
10. const baseIPURL = import.meta.env.BASE_IP_URL;
11. </script>
12. <template>
13.   <div>
14.    <div>地址为:{{ baseIPURL }}</div>
15.    <div>IP地址为:{{ baseIP }}</div>
16.    <div>WebRTC IP地址为:{{ getip }}</div>
18.   </div>
19. </template>
21. <style lang='scss' scoped>
23. </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

2. import axios from 'axios'
3. // 利用百度第三方服务查询到IP地址
4. export const BaiduAPIgetIp = async () => {
5.   const response = await axios('https://qifu-api.baidubce.com/ip/local/geo/v1/district');
6.   console.log(response,'BaiduAPIgetIp')
7.   if(response&&response.data.code=='Success'){
8.     return response.data.ip
9.   }else{
10.     return ''
11.   }
12. }
13. // 使用ipinfo.io查询IP地址
14. export const getIpinfo = async () => {
15.   const response = await axios('https://ipinfo.io/ip');
16.   return response.data||''
17. }
18. // 使用ifconfig查询IP地址
19. export const getifconfig = async () => {
20.   const response = await axios('https://ifconfig.me/');
21.     return response.data||''
22. }
23. //使用ipify.io查询IP地址（测试的时候，这接口没有返回）
24. export const getIpify = async () => {
25.   const response = await axios('https://api64.ipify.org?format=json');
26. }

复制代码

2）在vue页面中使用

2. <script setup lang='ts'>
3. import {ref,onMounted} from 'vue'
4. import {getUserIP} from '@/utils/getIpWebRTC.js'
5. import {BaiduAPIgetIp,getIpify,getIpinfo,getifconfig} from '@/utils/getIpApi.js'
6. let getip=ref('')
7. getUserIP(ip => {
8.   getip.value=ip
9. });
11. const baseIP = import.meta.env.BASE_IP;
12. const baseIPURL = import.meta.env.BASE_IP_URL;
13. let baiduIp=ref('')
14. let Ipify=ref('')
15. let Ipinfo=ref('')
16. let ifconfig=ref('')
17.   
18. onMounted(async()=>{
19.   // 第三方服务返回IP地址"124.64.23.233"？
20.   baiduIp.value=await BaiduAPIgetIp()
21.   // Ipify.value=await getIpify()
22.   Ipinfo.value=await getIpinfo()
23.   ifconfig.value=await getifconfig()
24. })
26. </script>
27. <template>
28.   <div>
29.    <div>地址为:{{ baseIPURL }}</div>
30.    <div>IP地址为:{{ baseIP }}</div>
31.    <div>WebRTC IP地址为:{{ getip }}</div>
32.    <div>BaiduAPI IP地址为:{{ baiduIp }}</div>
33.    <div>Ipify IP地址为:{{ Ipify }}</div>
34.    <div>ipinfo IP地址为:{{ Ipinfo }}</div>
35.    <div>ifconfig IP地址为:{{ ifconfig }}</div
36.   </div>
37. </template>
38. <style lang='scss' scoped>
40. </style>

复制代码

 3、实现结果

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

   两者查询出的IP不一致是由于：公网IP和私网IP
  公网IP：是互联网上唯一标识设备的地点，允许设备直接与环球互联网通讯。它是公共地点，用于服务器或设备在互联网上的唯一标识。环球唯一，任何设备都可以通过互联网访问到它
  私网IP：是局域网（LAN）内部使用的地点，用于设备在局域网内的通讯。它无法直接在互联网上访问，通常由网络管理员分配。仅在局域网内有效，无法从互联网直接访问
  


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。