如何在 Chrome / Firefox 上启用 geoIP？ ipinfo 等服务在 Chrome 和 Firefox 上被阻止，但在 Brave 中可以使用答案

【问题标题】：How can I enable geoIP on Chrome / Firefox? Services like ipinfo are getting blocked on Chrome and Firefox, but work in Brave如何在 Chrome / Firefox 上启用 geoIP？ ipinfo 等服务在 Chrome 和 Firefox 上被阻止，但在 Brave 中可以使用
【发布时间】：2021-12-12 00:07:05
【问题描述】：

在页面加载时，我正在尝试使用 ipinfo 之类的服务获取基于访问者 IP 的坐标：

const request = await fetch("https://ipinfo.io/json?token=TOKEN", {
    method: 'GET',
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
    "charset": "utf-8"
});

这在 Brave 中按预期工作。在 Chrome 中，请求被“客户端阻止”。在 Firefox 中，请求因 CORS 而失败。

添加 cors-anywhere url 也不可行，因为它返回 cors-anywhere url 服务（而不是访问者）的位置坐标。

如何让 geoIP 在 Chrome 和 Firefox 上运行？是否有任何服务可以更好地解决这个问题 - 特别是对于来自 localhost 的请求的开发环境？

【问题讨论】：

您应该尝试删除 fetch 有效负载中的所有内容，然后使用简单的 URL 进行调用。您传递的大多数设置（如方法、允许、接受字符集）都不需要您的请求。
而且 fetch 中的 Access-Control-Allow-Origin 标头不会做任何事情。它的目的是在服务器端设置以允许 CORS

标签： cors ip coordinates fetch-api geoip

【解决方案1】：

我首先使用 api.ipify.org（前面有一个 cors-anywhere url）获取访问者的 IP，然后将 ip 地址插入到获取 ip 信息的查询中，从而解决了这个问题。代码如下：

const ip = await fetch("https://[CORS-ANYWHERE-URL]/https://api.ipify.org?format=json&callback=getIP");

const ip_json = await ip.json();
console.log(ip_json);

const request = await fetch(`https://[CORS-ANYWHERE-URL]/ipinfo.io/${ip_json["ip"]}/geo?token=TOKEN`, {
    method: 'GET',
    "Access-Control-Allow-Origin": "",
    "Content-Type": "application/json",
    "charset": "utf-8"
});

【讨论】：