获取本机IP地址是前端工程师经常需要处理的问题。JavaScript 有几种方法可以获取客户端的IP地址。下面是三种获取本机IP的方法。

方法1:使用第三方 API

一种获取客户端IP地址的最简单方法是使用第三方API。可以使用一些免费API,例如ipify.org等来获取IP地址。下面的代码片段展示了如何使用 JavaScript 和 API 获取本机IP地址。

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

方法2:使用 WebRTC(需要用户授权)

WebRTC 是一种 JavaScript API,用于在浏览器之间直接传输数据。它也可以用于获取客户端IP地址。该方法通常比使用API更快速和可靠。以下是一些使用 WebRTC 获取IP地址的代码。

var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;var pc = new myPeerConnection({iceServers:[]}), noop = function(){}; var localIPs = {};pc.createDataChannel("");pc.createOffer().then(function (sdp) {sdp.sdp.split('\n').forEach(function (line) { if (line.indexOf('candidate') < 0) return;line.match(ipRegex).forEach(function (ip) {localIPs[ip] = true;});});pc.setLocalDescription(sdp, noop, noop);}).catch(function (reason) {console.log(reason);});var ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;var ips = Object.keys(localIPs);console.log(ips[0]);

方法3:使用 DNS 查询

DNS 是一种用于解析主机名为 IP 地址的系统。可以使用 JavaScript DNS 查询来获取本机IP地址。下面是如何使用 JavaScript 进行DNS查询的示例代码。

var request = new XMLHttpRequest();request.open('GET', 'https://api.ipify.org?format=json', true);request.onload = function () {if (request.status >= 200 && request.status < 400) {var data = JSON.parse(request.responseText);console.log(data.ip);}};request.onerror = function () {console.error('Error occurred during the network request');};request.send();