1.webp){kind=avatar}
之前在其他博客上看到過一種訪客信息卡片，不僅能顯示訪客的 IP 地址，還能展示所在國家、城市、運營商等信息，看起來非常酷炫，令人心生羡慕。於是我也想在自己的靜態博客（基於 Astro）中實現類似功能。
然而，靜態網站沒有後端支持，無法直接獲取訪客的 IP 地址。雖然 Netlify Functions 等方案或許可以解決這個問題，但目前我對這類服務還不太熟悉。因此，問題就轉化為了：
如何在純前端（僅使用 HTML/JavaScript）獲取訪問者的公網 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/ - 示例響應：
223.96.68.4
2. ipify.org
- 介面地址：
https://api64.ipify.org?format=json - 示例響應：
{"ip": "223.96.68.4"}
3. ipinfo.io
-
介面地址：
https://ipinfo.io/json -
示例響應：
{"ip": "223.96.68.4","city": "Taipei","region": "Taipei","country": "TW","loc": "25.0375,121.5637","org": "AS24444 Taiwan Mobile Company Limited","postal": "314000","timezone": "Asia/Taipei","readme": "https://ipinfo.io/missingauth"}
4. ipapi.co
-
介面地址：
https://ipapi.co/json/ -
示例響應：
{"ip": "223.96.68.4","network": "223.96.0.0/16","version": "IPv4","city": "Taipei","region": "Taipei","region_code": "TP","country": "TW","country_name": "Taiwan","country_code": "TW","country_code_iso3": "TWN","country_capital": "Taipei","country_tld": ".tw","continent_code": "AP","in_eu": false,"postal": null,"latitude": 36.6683,"longitude": 116.9972,"timezone": "Asia/Taipei","utc_offset": "+0800","country_calling_code": "+886","currency": "TWD","currency_name": "New Taiwan Dollar","languages": "zh-TW,en","country_area": 36197.796,"country_population": 23561236,"asn": "AS24444","org": "AS24444 Taiwan Mobile Company Limited"}
5. Cloudflare
-
介面地址：
https://www.cloudflare.com/cdn-cgi/trace -
示例響應：
fl=80f307h=www.cloudflare.comip=61.66.116.69ts=1763636529.367visit_scheme=httpsuag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36colo=TPEsliver=nonehttp=http/3loc=TWtls=TLSv1.3sni=plaintextwarp=offgateway=offrbi=offkex=X25519MLKEM768
小結
對於靜態博客或純前端項目，藉助上述任一 API，即可輕松實現訪客信息顯示的功能，具體的參數詳情如果不懂可以去詢問AI。後續等我調試好訪客信息卡片我也會寫一篇教程，敬請期待！