前端獲取IP地址幾種常見的方法及其代碼實例

更新時間：2025年09月15日 08:39:18 作者：itanly

在前端獲取當(dāng)前IP地址,由于瀏覽器環(huán)境的安全限制,無法直接獲取到用戶的IP地址,不過可以通過幾種間接方法來實現(xiàn),這篇文章主要介紹了前端獲取IP地址幾種常見的方法及其代碼實例,需要的朋友可以參考下

前言

前端獲取IP地址有多種方法，可以通過第三方API、WebRTC、服務(wù)器代理等方式實現(xiàn)。以下是幾種常見的方法及其代碼實例。

使用第三方API獲取IP地址

第三方API是最簡單的方式，通常免費且無需復(fù)雜配置。常用的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格式的數(shù)據(jù)，包含IP地址及其他信息（如地理位置、ISP等）。

通過WebRTC獲取本地IP地址

WebRTC可以獲取客戶端的本地IP地址，但通常只能獲取內(nèi)網(wǎng)IP，而非公網(wǎng)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環(huán)境或localhost下運行。

通過服務(wù)器代理獲取IP地址

如果前端無法直接獲取IP，可以通過后端服務(wù)獲取，前端調(diào)用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('服務(wù)器運行中'));

前端調(diào)用：

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服務(wù)（如Cloudflare）會在請求頭中傳遞客戶端IP。前端可以通過讀取請求頭獲?。?/p>

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查詢結(jié)果:', data);
};
dnsLookup();

這種方法主要用于調(diào)試，實際應(yīng)用較少。