如何纯前端获取访客的IP信息

之前在其他博客上看到过一种访客信息卡片，不仅能显示访客的 IP 地址，还能展示所在国家、城市、运营商等信息，看起来非常酷炫，令人心生羡慕。于是我也想在自己的静态博客（基于 Astro）中实现类似功能。

然而，静态网站没有后端支持，无法直接获取访客的 IP 地址。虽然 Netlify Functions 等方案或许可以解决这个问题，但目前我对这类服务还不太熟悉。因此，问题就转化为了：

如何在纯前端（仅使用 HTML/JavaScript）获取访问者的公网 IP 并展示相关信息？

纯前端获取公网 IP 的可行方案#

在纯前端环境中，获取访客公网 IP 目前主要有两种方式：

通过第三方 API 接口
这是最常用、最可靠的方式。只需向特定的公开 API 发起请求，即可获得访客的公网 IP，部分服务还能返回地理位置、运营商、时区等丰富信息。
通过 WebRTC 技术
通过 WebRTC 的 ICE（Interactive Connectivity Establishment）流程，可以在浏览器中直接获取用户的 IPv4 和 IPv6 地址，而无需依赖服务器。但某些浏览器可能会限制 WebRTC 的功能，导致无法获取。

因此，我最终选择了调用第三方 IP 查询 API 的方案。这类 API 不仅简单易用，还能提供额外的地理位置信息，非常适合用于构建访客信息卡片。

常用第三方 IP 查询 API 推荐#

以下是一些我收集的稳定、免费且无需认证的公共 API：

1. icanhazip.com#

接口地址：https://www.icanhazip.com/
示例响应：
```
1
223.96.68.4
```

2. ipify.org#

接口地址：https://api64.ipify.org?format=json
示例响应：
```
1
{
2
  "ip": "223.96.68.4"
3
}
```

3. ipinfo.io#

接口地址：https://ipinfo.io/json

示例响应：

1
  {
2
   "ip": "223.96.68.4",
3
   "city": "Jiaxing",
4
   "region": "Zhejiang",
5
   "country": "CN",
6
   "loc": "30.7522,120.7500",
7
   "org": "AS24444 Shandong Mobile Communication Company Limited",
8
   "postal": "314000",
9
   "timezone": "Asia/Shanghai",
10
   "readme": "https://ipinfo.io/missingauth"
11
  }

4. ipapi.co#

接口地址：https://ipapi.co/json/

示例响应：

1
  {
2
   "ip": "223.96.68.4",
3
   "network": "223.96.0.0/16",
4
   "version": "IPv4",
5
   "city": "Jinan",
6
   "region": "Shandong",
7
   "region_code": "SD",
8
   "country": "CN",
9
   "country_name": "China",
10
   "country_code": "CN",
11
   "country_code_iso3": "CHN",
12
   "country_capital": "Beijing",
13
   "country_tld": ".cn",
14
   "continent_code": "AS",
15
   "in_eu": false,
16
   "postal": null,
17
   "latitude": 36.6683,
18
   "longitude": 116.9972,
19
   "timezone": "Asia/Shanghai",
20
   "utc_offset": "+0800",
21
   "country_calling_code": "+86",
22
   "currency": "CNY",
23
   "currency_name": "Yuan Renminbi",
24
   "languages": "zh-CN,yue,wuu,dta,ug,za",
25
   "country_area": 9596960,
26
   "country_population": 1411778724,
27
   "asn": "AS24444",
28
   "org": "Shandong Mobile Communication Company Limited"
29
  }

5. Cloudflare#

接口地址：https://www.cloudflare.com/cdn-cgi/trace
示例响应：

1
fl=464f238
2
h=www.cloudflare.com
3
ip=223.96.68.4
4
ts=1760844608.215
5
visit_scheme=https
6
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
7
colo=SJC
8
sliver=none
9
http=http/2
10
loc=CN
11
tls=TLSv1.3
12
sni=plaintext
13
warp=off
14
gateway=off
15
rbi=off
16
kex=X25519MLKEM768

小结#

对于静态博客或纯前端项目，借助上述任一 API，即可轻松实现访客信息显示的功能，具体的参数详情如果不懂可以去询问AI。后续等我调试好访客信息卡片我也会写一篇教程，敬请期待！