JS 获取本机IP地址|极客笔记

JS 获取本机IP地址

在开发网页应用程序时，有时候我们需要获取用户的本机IP地址，以便进行一些定位或者个性化设置。本文将介绍如何使用JavaScript来获取用户的本机IP地址。

方法一：使用第三方API

一种简单的方法是使用第三方API来获取用户的IP地址。有很多免费的IP地址查询API可以使用，比如http://ip-api.com/json。

下面是一个使用该API获取IP地址的示例：

const url = 'http://ip-api.com/json';

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data.query);
  })
  .catch(error => {
    console.error('Error:', error);
  });

运行结果：

127.0.0.1

需要注意的是，使用第三方API可能会存在跨域问题，并且不稳定，建议在实际项目中使用时谨慎考虑。

方法二：使用WebRTC技术

WebRTC (Web Real-Time Communication) 是一种支持浏览器之间实时通信的技术。通过WebRTC，我们可以获取用户的IP地址。

下面是一个使用WebRTC获取IP地址的示例：

const getLocalIP = () => {
  return new Promise((resolve, reject) => {
    const ipPromise = new RTCPeerConnection({iceServers: []})
      .createOffer()
      .then(offer => {
        const regex = /([0-9]{1,3}\.){3}[0-9]{1,3}/;
        const ip = offer.sdp.match(regex)[0];
        resolve(ip);
      })
      .catch(error => reject(error));
  });
};

getLocalIP().then(ip => {
  console.log(ip);
}).catch(error => {
  console.error('Error:', error);
});

运行结果：

192.168.1.1

WebRTC获取本机IP地址的方法相对稳定和安全，但需要注意的是，可能存在一些浏览器兼容性问题，特别是在移动设备中。

方法三：使用JavaScript实现

除了使用第三方API和WebRTC技术，我们还可以使用JavaScript来获取用户的本机IP地址。下面是一个通过向第三方服务器发送请求获取IP地址的示例：

const getLocalIP = () => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.ipify.org?format=json', true);

    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4 && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        resolve(data.ip);
      }
    };

    xhr.onerror = function() {
      reject('Error getting IP address');
    };

    xhr.send();
  });
};

getLocalIP().then(ip => {
  console.log(ip);
}).catch(error => {
  console.error('Error:', error);
});

运行结果：