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

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

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

前言

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

使用第三方API獲取IP地址

第三方API是最簡(jiǎn)單的方式，通常免費(fèi)且無(wú)需復(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等）。

通過(guò)WebRTC獲取本地IP地址

WebRTC可以獲取客戶端的本地IP地址，但通常只能獲取內(nèi)網(wǎng)IP，而非公網(wǎng)IP。以下是通過(guò)WebRTC獲取本地IP的代碼：

const getLocalIP = async () => {
  const peerConnection = new RTCPeerConnection({ iceServers: [] });
  peerConnection.createDataChannel('');
  peerConnection.createOffer()
    .then(offer => peerConnection.setLocalDescription(offer))
    .catch(error => console.error('WebRTC錯(cuò)誤:', 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可能因?yàn)g覽器隱私策略受限，需在HTTPS環(huán)境或localhost下運(yùn)行。

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

如果前端無(wú)法直接獲取IP，可以通過(guò)后端服務(wù)獲取，前端調(diào)用API即可。以下是一個(gè)簡(jiǎn)單的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ù)器運(yùn)行中'));

前端調(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）會(huì)在請(qǐng)求頭中傳遞客戶端IP。前端可以通過(guò)讀取請(qǐng)求頭獲取：

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）。

通過(guò)DNS查詢獲取IP地址

通過(guò)DNS查詢可以獲取客戶端的大致地理位置，但無(wú)法直接獲取IP。以下是一個(gè)示例：

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)試，實(shí)際應(yīng)用較少。