在 NextJS 上获取客户端 IP 并使用 SSR答案

【问题标题】：Get the client IP on NextJS and use SSR在 NextJS 上获取客户端 IP 并使用 SSR
【发布时间】：2021-05-12 15:44:52
【问题描述】：

我正在制作一个天气应用程序，我通过 IPIFY 获得客户端 IP，但这会丢失 SSR，或者我使用 SSR 并获得服务器 IP。有人告诉我认为我可以使用标头 x-forwarded-for，然后使用此值使用 SSR 进行天气 API 调用。

问题是我只用了nextjs，这里没有后端，二是不知道怎么调用或者使用前面的x-forwarded-for获取客户端IP。

这可能吗？
我该如何实现？

我正在使用 vercel 来部署应用程序。

【问题讨论】：

你有什么解决办法吗？
@ArcanaAgivale 不，我很久以前就完成了这个项目。老实说，我不记得我做了什么，但我肯定没有通过 SSR 获得客户端 IP

标签： ip next.js server-side-rendering clientip

【解决方案1】：

给你：

export async function getServerSideProps({ req }) {
  const forwarded = req.headers["x-forwarded-for"]
  const ip = forwarded ? forwarded.split(/, /)[0] : req.connection.remoteAddress
  return {
    props: {
      ip,
    },
  }
}

【讨论】：

【解决方案2】：

我认为您可以通过 getServerSideProps 获取它们。

export async function getServerSideProps({ req }) {
  console.log(req.headers) //see if you have those headers
  return {
    props: {
      headers
    },
  }
}

function Page({ headers }) {
  // Render data...
}

【讨论】：

我试过了，还是不行，所以我用了API Routes，它工作了，但只从http://localhost:3000/api获取数据。幸运的是我找到了解决问题的方法，基本上就在这里：github link。唯一的问题是我现在不知道如何获取IP，因为页面中调用的getData()没有req作为参数，所以我占用的header返回undefined。跨度>