前端获取IP地址方法总结，零基础入门到精通，收藏这篇就够了

原创于 2025-12-16 09:16:22 发布 · 329 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #tcp/ip #网络协议

计算机同时被 3 个专栏收录

1879 篇文章

订阅专栏

程序员

1878 篇文章

订阅专栏

前端

53 篇文章

订阅专栏

前端获取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();

这种方法主要用于调试，实际应用较少。