Nuxt 3基于IP国家代码的重定向中间件在Netlify部署后失效

问题根源 #

你这个路由中间件在本地正常但Netlify部署后失效，核心原因是部署后中间件可能在Netlify服务器端执行——此时调用ip-api拿到的是Netlify服务器的IP，而非用户的真实IP，导致国家代码判断完全错误。本地开发时中间件默认在客户端运行，所以能正确获取用户真实IP。

解决方案 #

方案1：强制中间件仅在客户端执行 #

修改中间件，开头加入服务器端判断，确保逻辑只在用户浏览器中运行：

export default defineNuxtRouteMiddleware(async (to, from) => {
  // 仅在客户端执行IP判断逻辑
  if (process.server) return

  const targetPathDe = '/de-de'
  const targetPathEn = '/de-en'

  if (to.path === targetPathDe || to.path === targetPathEn) {
    return
  }

  // 改用HTTPS请求，避免Netlify部署后被混合内容策略拦截
  const ipApiUrl = 'https://ip-api.com/json/?fields=countryCode'

  try {
    const response = await fetch(ipApiUrl)
    const ipData = await response.json()

    return navigateTo(ipData.countryCode === 'DE' ? targetPathDe : targetPathEn)
  } catch (error) {
    console.error('Error fetching IP data:', error)
    return navigateTo(targetPathEn)
  }
})

部署后，中间件会在用户浏览器中发起fetch请求，直接获取用户真实IP，解决判断错误问题。

方案2：利用Netlify请求头获取用户IP（SSR场景） #

如果你的站点启用了SSR（Nuxt3配置ssr: true），可以直接通过Netlify提供的请求头获取用户真实IP，无需依赖第三方API的服务器端请求：

export default defineNuxtRouteMiddleware(async (to, from) => {
  const targetPathDe = '/de-de'
  const targetPathEn = '/de-en'

  if (to.path === targetPathDe || to.path === targetPathEn) {
    return
  }

  let countryCode = 'US' // 默认 fallback 国家

  if (process.server) {
    // 从Netlify专属请求头获取用户真实IP
    const headers = useRequestHeaders()
    const clientIp = headers['x-nf-client-connection-ip'] || headers['x-forwarded-for']
    
    if (clientIp) {
      // 用用户真实IP调用ip-api
      const response = await fetch(`https://ip-api.com/json/${clientIp}?fields=countryCode`)
      const ipData = await response.json()
      countryCode = ipData.countryCode || countryCode
    }
  } else {
    // 客户端场景复用原逻辑
    const response = await fetch('https://ip-api.com/json/?fields=countryCode')
    const ipData = await response.json()
    countryCode = ipData.countryCode || countryCode
  }

  return navigateTo(countryCode === 'DE' ? targetPathDe : targetPathEn)
})

x-nf-client-connection-ip是Netlify直接提供的用户真实IP请求头，比通用的x-forwarded-for更可靠。

额外注意点 #

• 务必把ip-api的请求协议从http改成https，否则Netlify部署后会被浏览器的混合内容安全策略拦截请求。
• 如果是静态生成模式（ssr: false），方案1是最优选择——静态站点没有服务器端执行环节，只能在客户端处理IP判断逻辑。

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