使用IPinfo.io按访问者国家跳转对应子域名功能失效求助

问题原因 #

你当前的实现存在几个明显错误，是功能失效的核心原因：

• localStorage键名不统一：前置判断读取的键是country，但调用IPinfo接口后存储的键是ipinfo，导致缓存逻辑完全不生效，每次访问都会重复请求接口
• 缺少跳转前校验：如果用户已经在对应国家的子域名下，会触发无限循环跳转
• 最初的window.location.href拼接逻辑错误：缺少子域名和主域名之间的.、主域名后缀，也没有保留原访问路径、查询参数等信息
• 多分支重复代码多，后续维护成本高

修复后可直接使用的代码 #

// 配置项，后续修改只需要改这里即可
const CONFIG = {
  ipinfoToken: '<替换成你的IPinfo Token>',
  mainDomain: 'mysite.tech',
  supportCountries: ['UA', 'KZ', 'RU']
}

// 先判断当前是否已经是对应国家子域名，避免循环跳转
const currentSubdomain = window.location.hostname.split('.')[0].toUpperCase()
const storedCountry = localStorage.getItem('country')

if (storedCountry && CONFIG.supportCountries.includes(storedCountry) && currentSubdomain !== storedCountry) {
  // 有本地缓存且需要跳转
  window.location.hostname = `${storedCountry.toLowerCase()}.${CONFIG.mainDomain}`
} else if (!storedCountry) {
  // 无缓存，调用IPinfo接口获取国家信息
  fetch(`https://ipinfo.io/json?${CONFIG.ipinfoToken}`)
    .then(res => res.json())
    .then(data => {
      const country = data.country?.toUpperCase() || 'RU'
      // 统一存储键名
      localStorage.setItem('country', country)
      // 不需要跳转的情况直接返回
      if (currentSubdomain === country.toLowerCase()) return
      // 执行跳转
      window.location.hostname = `${country.toLowerCase()}.${CONFIG.mainDomain}`
    })
}

额外注意事项 #

• 所有配置项都抽离到了开头的CONFIG对象中，后续调整域名、支持的国家列表不需要修改核心逻辑
• 如果有不需要跳转的特殊页面（比如全局统一的服务条款页），可以在跳转逻辑前加额外的路径判断跳过即可
• 若站点用了CDN缓存，建议把跳转逻辑放在CDN层执行，比前端JS跳转响应速度更快、用户体验更好

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