HTML本身无法直接获取本机IP，必须结合JavaScript或后端服务器语言（如PHP、Node.js）才能实现，且获取的是当前网络环境下的公网或局域网IP，而非物理硬件地址。
很多开发者在初期尝试用纯HTML标签去抓取IP时，往往会陷入死胡同，因为HTML只是标记语言，负责页面的骨架和展示，不具备逻辑处理能力，要解决这个问题，我们需要引入脚本语言来与浏览器或服务器进行交互，下面我们将深入探讨几种主流的实现方案，从前端到后端,帮你彻底理清其中的技术逻辑。
前端JavaScript获取IP的常见误区与正解
在浏览器端，JavaScript是获取IP最直接的途径，但这里有一个关键概念需要厘清：浏览器无法直接读取网卡MAC地址或物理IP,它只能知道当前请求发出的出口IP。
为什么纯HTML代码行不通？
HTML标签如<div>、<span>或<input>，它们的作用仅仅是定义内容结构，如果你试图在HTML中写类似<ip>192.168.1.1</ip>这样的自定义标签，浏览器会将其视为未知元素，不会执行任何网络请求来填充数据，任何声称“只需一段HTML代码即可获取IP”的说法，在技术层面上都是不准确的，除非这段代码里包含了<script>
利用第三方API实现前端获取
对于大多数前端开发者来说，调用公共API是最简单的方案，这种方式不需要配置后端服务器,直接在前端JS中发起请求即可。
- 原理：通过AJAX或Fetch API向第三方IP查询服务发送请求，服务器返回JSON格式的数据,前端解析并显示。
- 常用接口：例如
ip-api.com或ipify.org，这些服务通常支持跨域请求（CORS）,方便前端直接调用。 - 代码示例：
fetch('https://api.ipify.org?format=json') .then(response => response.json()) .then(data => console.log(data.ip));
安全性与隐私考量
虽然这种方式简单快捷，但业内专家指出，将IP查询逻辑完全暴露在前端存在一定风险，第三方API可能会记录你的访问日志，且如果API服务宕机，前端体验会直接受损，部分API对请求频率有限制,高频调用可能导致IP被封禁。
后端服务器获取本机IP的精准方案
如果你需要获取的是运行代码的服务器本身的IP，或者希望更稳定地控制数据源，后端方案是更优选择，这里以常见的PHP和Node.js为例,展示如何获取服务器真实IP。
PHP获取服务器IP的标准写法
PHP作为经典的Web后端语言，提供了超全局变量$_SERVER来存储服务器和执行环境信息。
- 核心变量：
$_SERVER['SERVER_ADDR']通常用于获取服务器所在的IP地址。 - 获取客户端IP：如果目标是获取访问者的IP，则需要处理
$_SERVER['REMOTE_ADDR']，但在经过代理（如Nginx、CDN）后，可能需要检查$_SERVER['HTTP_X_FORWARDED_FOR']。 - 代码逻辑：
$ip = $_SERVER['REMOTE_ADDR']; echo "您的IP是: " . $ip;
Node.js环境下的IP获取
Node.js提供了os模块,可以方便地获取操作系统的网络配置信息。
- 内置模块：使用
require('os')引入模块。 - 方法调用：
os.networkInterfaces()返回所有网络接口的详细信息，包括IPv4、IPv6地址。 - 筛选逻辑：通常需要过滤掉
lo（本地回环）接口,选择第一个非回环的IPv4地址。
对比：前端API与后端获取的差异
| 特性 |
前端JS调用第三方API | 后端PHP/Node.js获取 |
|---|---|---|
| 获取对象 | 访问者的公网出口IP | 服务器自身的IP或经过代理后的客户端IP |
| 依赖环境 | 需要稳定的网络连接和第三方服务 | 需要服务器端运行环境 |
| 延迟情况 | 受限于第三方API响应速度 | 通常更快，无额外网络跳转 |
| 数据准确性 | 可能因代理或CDN存在偏差 | 可精确控制，支持多层代理头解析 |
局域网IP与公网IP的区别及场景应用
在实际开发中，获取“本机IP”往往存在歧义，你需要明确是想要获取当前设备在局域网内的内网IP，还是通过路由器映射到互联网的公网IP,这两者在技术实现和应用场景上有显著不同。
局域网IP：内网通信的关键
局域网IP通常以168.x.x、x.x.x或16.x.x开头，这类IP仅在本地网络有效,无法直接从互联网访问。
- 应用场景：智能家居设备发现、本地文件共享、内网测试服务器搭建。
- 获取方式：
- 前端：较难直接获取,通常需要通过WebRTC技术或本地服务器协助。
- 后端：使用
os.networkInterfaces()或socket库,筛选出非回环且非虚拟网卡的接口地址。
公网IP：互联网身份的标识
公网IP是全球唯一的，由ISP（互联网服务提供商）分配,它是互联网通信的基础。
- 应用场景：网站访问统计、地理位置定位、远程桌面连接、API安全验证。
- 获取方式：
- 前端：必须依赖第三方API,因为浏览器本身不知道出口路由器的公网IP。
- 后端：如果服务器直接暴露在公网，
$_SERVER['REMOTE_ADDR']即为公网IP；若经过Nginx反向代理，需配置proxy_set_header来传递真实IP。
地域与网络环境的复杂性
行业共识认为，随着IPv6的普及和NAT（网络地址转换）技术的广泛应用，IP获取的准确性面临挑战，许多移动网络运营商使用CGNAT（Carrier-grade NAT），导致多个用户共享同一个公网IP,此时通过IP定位用户身份将变得非常困难。
常见问题解答（HTML本机IP代码）
如何在不使用后端的情况下，仅用前端代码获取用户IP？
可以使用JavaScript结合免费的第三方IP查询API，通过fetch或XMLHttpRequest发起GET请求，解析返回的JSON数据中的ip字段，这种方法简单有效,但需注意API的可用性和跨域限制。
获取到的IP是IPv4还是IPv6？如何区分？
这取决于当前网络环境，IPv4格式通常为4段数字（如168.1.1），而IPv6格式较长，包含十六进制数字和冒号（如2001:0db8:85a3::8a2e:0370:7334），在代码中，可以通过正则表达式或字符串长度判断，多数情况下，现代浏览器优先使用IPv6,若不可用则回退至IPv4。
为什么有时候获取到的IP是127.0.0.1？
0.0.1是本地回环地址，表示本机，如果在服务器端代码中直接获取本地IP而未指定具体网卡，或者在本地开发环境中测试，很容易得到这个地址，要获取真实IP，需明确指定网络接口,或在代码中过滤掉回环地址。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/%e5%a6%82%e4%bd%95%e8%8e%b7%e5%8f%96html%e6%9c%ac%e6%9c%baip%e4%bb%a3%e7%a0%81%ef%bc%9fhtml%e8%8e%b7%e5%8f%96%e5%ae%a2%e6%88%b7%e7%ab%af%e7%9c%9f%e5%ae%9eip%e5%9c%b0%e5%9d%80/
