JavaScript IP 地址查询

在前端开发中，可能需要获取用户的 IP 地址来进行一些操作（如限制地区访问等）。本文将介绍如何使用 JavaScript 获取用户的 IP 地址。

1. 使用第三方 API

我们可以使用一些第三方 API 来获取用户的 IP 地址，例如 ipify API。该 API 提供了免费的 IP 地址查询服务，我们只需要向其发送一个 HTTP GET 请求，就可以获取到用户的 IP 地址。

下面是一个使用 ipify API 获取用户 IP 地址的 JavaScript 代码片段：

fetch("https://api.ipify.org?format=json")
  .then(response => response.json())
  .then(data => console.log(data.ip))
  .catch(error => console.error(error));

该代码片段使用了 fetch 函数来发送 HTTP GET 请求，并使用 Promise 来处理异步响应。接收到响应后，我们可以使用 response.json() 方法将响应数据转换为 JSON 格式，并从中取出 IP 地址。

2. 使用 WebRTC API

另一种获取用户 IP 地址的方法是使用 WebRTC API。WebRTC 是一个由 Google、Mozilla 和 Opera 发起的项目，旨在提供浏览器之间的实时通讯能力。

WebRTC API 中的 RTCPeerConnection 接口可以获取浏览器的本地 IP 地址。但需要注意的是，这种方法只适用于支持 WebRTC 的浏览器（如 Chrome、Firefox 等）。

下面是一个使用 WebRTC API 获取用户 IP 地址的 JavaScript 代码片段：

const peerConnection = new RTCPeerConnection({ iceServers: [] });
peerConnection.createDataChannel("");
peerConnection.createOffer()
  .then(offer => peerConnection.setLocalDescription(offer))
  .catch(error => console.error(error));
peerConnection.onicecandidate = event => {
  if (event.candidate) {
    console.log(event.candidate.address);
    peerConnection.onicecandidate = null;
  }
};

该代码片段创建了一个 RTCPeerConnection 对象，并使用 createDataChannel() 方法创建了一个数据通道。接着使用 createOffer() 方法创建一个 offer，并使用 setLocalDescription() 方法为 offer 设置本地描述。最后通过 onicecandidate 事件监听器获取到本地 IP 地址。

3. 总结

本文介绍了两种获取用户 IP 地址的方法：使用第三方 API 和使用 WebRTC API。使用第三方 API 可以在任何浏览器中使用，但需注意接口的调用频率。而使用 WebRTC API 只适用于支持 WebRTC 的浏览器，但可以在本地获取 IP 地址，不需要向服务器发送请求。