javascript无法直接获取真实公网ip，只能通过https调用如https://api64.ipify.org?format=json等cors友好接口间接获取服务端视角的请求源ip，但该ip可能被代理或cdn修改；webrtc提取内网ip已被主流浏览器限制，不推荐用于生产环境；高可信度需求必须依赖后端解析x-forwarded-for或remoteaddress等可信头信息。
前端 JavaScript 无法直接获取真实公网 IP
浏览器的 JavaScript 运行在沙箱中，没有权限访问网络栈或操作系统信息，navigator、window.location 或 XMLHttpRequest 都拿不到用户真实出口 IP。所谓“前端获取 IP”，本质是调用第三方 HTTP 接口返回服务端看到的请求源 IP——这 IP 可能被代理、CDN 或 NAT 修改过，不等于用户本机 ipconfig 或 ifconfig 的结果。
常见错误现象：fetch("https://api.ipify.org") 返回的是 CDN 节点 IP，不是用户真实 IP；某些接口（如 https://httpbin.org/ip）在 HTTPS 页面里被浏览器阻止混合内容；未处理 CORS 导致控制台报 Blocked by CORS policy。
- 必须走 HTTPS 协议调用，HTTP 接口在现代浏览器中会被静默拦截
- 优先选明确支持 CORS 的服务，例如
https://api64.ipify.org?format=json（IPv4）、https://api64.ipify.org?format=json&type=ipv6 - 避免使用已失效或限制频繁请求的接口（如老版本
https://jsonip.com已停服）
推荐方案：用 fetch 调用 ipify 并处理响应
https://api64.ipify.org 是轻量、稳定、无 key、支持 JSON/纯文本、允许 CORS 的公开服务，适合前端直接调用。注意它默认返回纯文本，加 ?format=json 才返回结构化数据。
实操建议：
- 用
fetch("https://api64.ipify.org?format=json")获取 JSON 响应，再取data.ip - 加
.catch()捕获网络失败、CORS 拒绝、JSON 解析错误等异常，不要只靠then() - 避免在页面加载完成前就执行请求，确保 DOM 就绪，例如放在
DOMContentLoaded回调里
fetch("https://api64.ipify.org?format=json")
.then(r => r.json())
.then(data => {
document.getElementById("ip-display").textContent = data.ip;
})
.catch(err => {
console.error("获取 IP 失败:", err);
document.getElementById("ip-display").textContent = "未知";
});
为什么不能用 WebRTC 获取真实局域网 IP？
过去有人用 RTCPeerConnection 构造假连接，从 SDP 中提取 candidate 字段来猜本地内网 IP（如 192.168.x.x），但这属于浏览器侧旁路行为，已被主流浏览器限制：
- Chrome 90+、Firefox 91+ 默认禁用非安全上下文（即非 HTTPS）下的 WebRTC IP 收集
- 即使 HTTPS 环境下，用户可在设置中关闭
WebRTC non-proxied UDP，导致返回空 candidate - 该方法完全无法获取公网 IP，且违反隐私策略，现代框架（如 React/Vue）中可能触发警告或被 CSP 策略拦截
结论：RTCPeerConnection 不可靠、不合规、不推荐用于生产环境。
后端配合才是准确方案（关键提醒）
如果业务真需要高可信度的 IP（比如风控、地理围栏、登录审计），前端任何手段都不可信。攻击者可伪造 Referer、禁用 JS、篡改 fetch 响应、甚至用 curl 直接调用接口绕过你的逻辑。
真正可行的做法是：由后端接收请求时读取 req.headers["x-forwarded-for"] 或 req.connection.remoteAddress（取决于部署架构），再通过 API 返回给前端展示。但要注意：
-
X-Forwarded-For可被客户端随意伪造，必须只信任你自己的反向代理（如 Nginx）添加的字段 - Node.js 的
req.ip（Express）或req.socket.remoteAddress更可信，但需确认没被多层代理污染 - CDN（如 Cloudflare）会提供
Cf-Connecting-Ip头，需在后端显式启用并验证签名
前端显示的 IP，永远只是“服务端视角下本次请求的来源地址”，这个地址本身受网络路径影响极大——这点容易被忽略，却直接决定功能是否可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
