前端获取IP地址几种常见的方法及其代码实例
作者：itanly
在前端获取当前IP地址,由于浏览器环境的安全限制,无法直接获取到用户的IP地址,不过可以通过几种间接方法来实现,这篇文章主要介绍了前端获取IP地址几种常见的方法及其代码实例,需要的朋友可以参考下
前言
前端获取IP地址有多种方法，可以通过第三方API、WebRTC、服务器代理等方式实现。以下是几种常见的方法及其代码实例。
使用第三方API获取IP地址
第三方API是最简单的方式，通常免费且无需复杂配置。常用的API包括ipify、ipapi等。
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => console.log('IP地址:', data.ip))
.catch(error => console.error('获取IP失败:', error));
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => console.log('IP地址:', data.ip))
.catch(error => console.error('获取IP失败:', error));
这些API返回JSON格式的数据，包含IP地址及其他信息（如地理位置、ISP等）。
通过WebRTC获取本地IP地址
WebRTC可以获取客户端的本地IP地址，但通常只能获取内网IP，而非公网IP。以下是通过WebRTC获取本地IP的代码：
const getLocalIP = async () => {
const peerConnection = new RTCPeerConnection({ iceServers: [] });
peerConnection.createDataChannel('');
peerConnection.createOffer()
.then(offer => peerConnection.setLocalDescription(offer))
.catch(error => console.error('WebRTC错误:', error));
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
const ipMatch = event.candidate.candidate.match(ipRegex);
if (ipMatch) {
console.log('本地IP地址:', ipMatch[1]);
peerConnection.close();
}
}
};
};
getLocalIP();
注意：WebRTC可能因浏览器隐私策略受限，需在HTTPS环境或localhost下运行。
通过服务器代理获取IP地址
如果前端无法直接获取IP，可以通过后端服务获取，前端调用API即可。以下是一个简单的Node.js后端示例：
// 后端代码（Node.js + Express）
const express = require('express');
const app = express();
app.get('/get-ip', (req, res) => {
const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
res.json({ ip });
});
app.listen(3000, () => console.log('服务器运行中'));
前端调用：
fetch('http://localhost:3000/get-ip')
.then(response => response.json())
.then(data => console.log('IP地址:', data.ip))
.catch(error => console.error('获取IP失败:', error));
使用CDN获取IP地址
部分CDN服务（如Cloudflare）会在请求头中传递客户端IP。前端可以通过读取请求头获取：
fetch('https://example.com/api/get-ip', {
headers: { 'Accept': 'application/json' }
})
.then(response => response.json())
.then(data => console.log('IP地址:', data.ip));
后端需配置CDN传递IP头信息（如CF-Connecting-IP或X-Forwarded-For）。
通过DNS查询获取IP地址
通过DNS查询可以获取客户端的大致地理位置，但无法直接获取IP。以下是一个示例：
const hostname = window.location.hostname;
const dnsLookup = async () => {
const response = await fetch(`https://dns.google/resolve?name=${hostname}`);
const data = await response.json();
console.log('DNS查询结果:', data);
};
dnsLookup();
这种方法主要用于调试，实际应用较少。
总结
前端获取IP地址的方法多种多样，具体选择需根据场景决定：
- 第三方API简单易用，适合快速获取公网IP。
- WebRTC适合获取本地IP，但受隐私策略限制。
- 服务器代理和CDN适合需要精确控制的场景。
- DNS查询适用性较低，通常不推荐。
到此这篇关于前端获取IP地址几种常见的方法及其代码实例的文章就介绍到这了,更多相关前端获取IP地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！