Ipinfo.io Geolocation在JSfiddle中工作但不是Codepen

Question

我在这里有一个简单的地理定位小提琴：

http://jsfiddle.net/cbtzzLjs/17/

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

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

它在Codepen中不起作用。

https://codepen.io/Teeke/pen/EEeReM

我尝试将https添加到我的codepen网址。我在codepen中加载了JQuery并禁用了自动重新加载，以免烧掉我的速率限制。

codepen控制台返回：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://codepen.io’).

这是内部代码设置吗？我可以在条款和条件下使用地理位置API吗？

Answer 1

您需要在codepen中将http://ipinfo.io更改为https://ipinfo.io，因为您尝试从安全的codepen源访问ip。

所以，你的js应该在codepen中如下：

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