如何在Chrome、Firefox中使用geoIP？解决ipinfo服务被拦截问题

问题根源 #

1. 你的fetch代码写法存在错误：所有请求头参数需要放在配置的headers字段下，你直接写在配置顶层会导致请求格式异常；另外Access-Control-Allow-Origin是服务端返回的响应头，前端请求中添加该字段没有任何作用，反而可能触发浏览器安全校验拦截。
2. 不同浏览器表现差异是因为安全策略严格度不同：Brave默认跨域限制宽松，Chrome的安全策略直接拦截了格式错误的跨域请求，Firefox严格校验CORS规则，ipinfo接口未配置允许你的域名跨域调用，因此直接报错。
3. cors-anywhere方案失效的原因你已经明确：代理服务发起请求会返回代理服务器的IP坐标，无法获取访客真实位置。

适配方案 #

本地开发环境

• 方案1：开启浏览器跨域禁用模式测试
  Windows端给Chrome快捷方式的「目标」属性后追加参数：--disable-web-security --user-data-dir="C:\ChromeDevUserData"，重启后即可绕开CORS校验，localhost可直接调用geoIP接口。
  Mac端执行终端命令启动测试用Chrome：open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/你的用户名/Documents/ChromeDevUserData
• 方案2：用本地开发服务做代理转发
  不管是Vite、Webpack还是其他框架的本地devServer，都可以配置代理规则，将/ipinfo前缀的请求代理到geoIP服务地址，同域请求不会触发CORS校验，本地开发时你自身的IP就是访客IP，返回的坐标完全符合测试需求。

生产环境

不要直接从前端发起geoIP接口请求，统一走自有后端服务转发：前端先请求你自己的后端接口，后端拿到访客真实IP后，调用geoIP服务的指定IP查询接口，再把结果返回给前端。这种方式完全不会有CORS问题，也不会暴露你的geoIP服务token，同时能准确拿到访客真实坐标，是生产环境的标准实现方案。

修正后的测试代码 #

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

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