快捷導(dǎo)航

前端獲取用戶ip信息幾種常見(jiàn)的方法

更新時(shí)間：2025年02月26日 09:10:34 作者：DaXiongJoker

這篇文章主要介紹了幾種在前端頁(yè)面獲取用戶IP地址的方法,包括使用第三方服務(wù)、WebRTC API和服務(wù)器端獲取,每種方法都有其優(yōu)缺點(diǎn),需要根據(jù)具體需求和場(chǎng)景選擇合適的方法,需要的朋友可以參考下

前言

在前端頁(yè)面獲取用戶的IP地址并不是一件直接的事情，因?yàn)槌鲇陔[私和安全考慮，瀏覽器通常不會(huì)直接提供用戶的IP地址給前端JavaScript代碼。不過(guò)，可以通過(guò)一些間接的方法來(lái)獲取用戶的IP地址。以下是幾種常見(jiàn)的方法：

1. 使用第三方服務(wù)

通過(guò)調(diào)用第三方服務(wù)來(lái)獲取用戶的IP地址。這些服務(wù)通常會(huì)返回用戶的IP地址信息。

示例代碼

async function getUserIP() {
  try {
    const response = await fetch('https://api.ipify.org?format=json');
    const data = await response.json();
    console.log('User IP:', data.ip);
    return data.ip;
  } catch (error) {
    console.error('Error fetching IP address:', error);
  }
}

getUserIP();

2. 使用瀏覽器的WebRTC API

WebRTC API可以用來(lái)獲取用戶的IP地址，但這種方法需要用戶授權(quán)，并且可能會(huì)暴露用戶的本地IP地址。

示例代碼

function getUserIP(callback) {
  const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
  if (!RTCPeerConnection) {
    callback('Not compatible with WebRTC');
    return;
  }

  const pc = new RTCPeerConnection({ iceServers: [] });
  const noop = () => {};

  pc.createDataChannel('');
  pc.createOffer().then(sdp => pc.setLocalDescription(sdp)).catch(noop);

  pc.onicecandidate = ice => {
    if (!ice || !ice.candidate || !ice.candidate.candidate) return;
    const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
    const ipMatch = ice.candidate.candidate.match(ipRegex);
    if (ipMatch) {
      callback(ipMatch[1]);
      pc.close();
    }
  };
}

getUserIP(ip => {
  console.log('User IP:', ip);
});

3. 使用服務(wù)器端獲取IP地址

最安全和可靠的方法是通過(guò)服務(wù)器端獲取用戶的IP地址，然后將IP地址傳遞給前端。

示例流程

前端請(qǐng)求服務(wù)器：

async function getUserIP() {
  try {
    const response = await fetch('/api/get-ip');
    const data = await response.json();
    console.log('User IP:', data.ip);
    return data.ip;
  } catch (error) {
    console.error('Error fetching IP address:', error);
  }
}

getUserIP();

服務(wù)器端處理（以Node.js為例）：

const express = require('express');
const app = express();

app.get('/api/get-ip', (req, res) => {
  const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  res.json({ ip });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});