如何在网页中通过 JavaScript 获取并显示用户真实 IP 地址-js教程-PHP中文网

如何在网页中通过 JavaScript 获取并显示用户真实 IP 地址

纯前端 javascript 无法直接获取用户真实公网 ip 地址；必须借助可信的第三方公网 api 或轻量后端服务，通过 http 请求获取响应中的 ip 数据，并安全地展示在 alert 弹窗中。

纯前端 javascript 无法直接获取用户真实公网 ip 地址；必须借助可信的第三方公网 api 或轻量后端服务，通过 http 请求获取响应中的 ip 数据，并安全地展示在 alert 弹窗中。

在浏览器环境中，JavaScript 运行于客户端沙箱，无法直接访问 TCP/IP 协议栈或网络接口信息，因此 window.location.host、navigator 等原生 API 均不提供用户公网 IP。所谓“纯前端获取 IP”的常见误区（如使用 WebRTC、STUN 或伪造请求头）实际返回的是局域网 IP（如 192.168.x.x）或不可靠的代理标识，对地理位置判断、IP 黑白名单等业务场景完全无效。

✅ 正确做法：调用可信的公网 IP 查询服务（无需自建后端）
推荐使用稳定、免密、跨域友好的公共 API，例如：

https://api.ipify.org?format=json（仅返回 IPv4 字符串）
https://jsonip.com/（返回 JSON 格式，含 ip 字段）
https://api64.ipify.org?format=json（支持 IPv6）

以下为安全、可立即运行的示例代码（兼容现代浏览器）：

<script>
async function showUserIP() {
  try {
    const res = await fetch('https://jsonip.com/');
    const data = await res.json();
    if (data && data.ip) {
      alert(`您的公网 IP 地址是：${data.ip}`);
    } else {
      alert('无法获取 IP 地址，请检查网络连接。');
    }
  } catch (err) {
    console.error('IP 获取失败:', err);
    alert('网络请求异常，请稍后重试。');
  }
}
// 页面加载完成后自动执行
document.addEventListener('DOMContentLoaded', showUserIP);
</script>

⚠️ 重要注意事项：

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

不要依赖单一 API：建议备用至少一个服务（如失败时 fallback 到 api.ipify.org），提升健壮性；
避免敏感用途：前端获取的 IP 仅作参考，不可用于身份认证、风控拦截等强安全场景——攻击者可轻易伪造请求或劫持响应；
合规提醒：根据 GDPR、《个人信息保护法》等要求，若需记录或传输用户 IP，须明确告知用途并获得用户授权；
IPv6 兼容：如需同时支持 IPv6，优先选用返回结构化 JSON 的接口（如 jsonip.com），并校验 data.ip 是否为有效 IPv6 地址。

总结：前端无法“直接”获取真实公网 IP，但可通过受信外部 API 实现间接获取。关键在于选择稳定服务、妥善处理异常、明确使用边界，并始终将高安全性逻辑交由服务端完成。