Ipinfo.io地理定位在JSfiddle可用但在Codepen无法运行的问题

我来帮你排查下问题所在，你遇到的情况大概率是两个小细节导致的：

1. DOM元素缺失导致代码报错 #

你的HTML里只有<div id="address"></div>，但JS代码里尝试操作$("#ip")这个元素——这个元素在你的Codepen HTML中根本不存在！浏览器执行到这一行时会抛出错误，直接中断后续代码，自然不会更新#address的内容。

2. 混合内容/请求协议问题 #

虽然你提到加了https前缀，但要确认请求的URL确实是https://ipinfo.io。Codepen本身是HTTPS环境，浏览器会阻止从HTTPS页面发起HTTP请求（混合内容限制），这也会导致请求失败。

修正后的完整代码 #

HTML部分

<div id="ip"></div>
<div id="address"></div>

JS部分（确保已经加载jQuery）

$.get("https://ipinfo.io", function (response) {
  $("#ip").html("IP: " + response.ip);
  $("#address").html("Awesome " + response.region);
  // $("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");

额外排查步骤 #

如果还是不行，打开浏览器的开发者工具（F12）切换到控制台，看看有没有具体的报错信息：

• 如果是CORS相关错误：确认ipinfo.io的jsonp接口是否正常可用（目前ipinfo.io支持jsonp跨域）
• 如果是请求403：可能是请求频率被限制，你可以尝试在请求里加上?token=你的ipinfo令牌（需要去ipinfo官网注册获取免费令牌）

内容的提问来源于stack exchange，提问作者RubyRube