如何在 next.js 应用程序中从服务器端获取客户端的 IP 地址？答案

【问题标题】：how to get the ip address of the client from server side in next.js app?如何在 next.js 应用程序中从服务器端获取客户端的 IP 地址？
【发布时间】：2021-09-21 02:48:02
【问题描述】：

我想获取用户时区和位置以根据位置和时区呈现服务器端页面，但我无法从请求中获取用户 IP 地址或获取本地主机 IP 地址 (127.0.0.1 ）。那我该怎么办？

【问题讨论】：

标签： javascript node.js reactjs express next.js

【解决方案1】：

您可以使用 NextRequest 对象作为本机 Request 接口的直接替代品，让您可以更好地控制如何处理请求。参考：https://nextjs.org/docs/api-reference/next/server#nextrequest

NextRequest 是完全类型化的，可以从 next/server 导入。

import type { NextRequest } from 'next/server'

NextRequest 对象是原生 Request 接口的扩展，添加了以下方法和属性：

cookies - 具有来自请求的 cookie
nextUrl - 包括一个扩展的、已解析的 URL 对象，它为您提供访问 Next.js 的特定属性，例如路径名、basePath、 trailingSlash 和 i18n
geo - 具有请求中的地理位置
geo.country - 国家代码
geo.region - 区域代码
geo.city - 城市
geo.latitude - 纬度
geo.longitude - 经度
ip - 有请求的 IP 地址
ua - 有用户代理

【讨论】：

【解决方案2】：

能够使用 next.js 应用检测用户 IP 地址：

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

【讨论】：

【解决方案3】：

您也可以尝试使用页面的getInitialProps。

IndexPage.getInitialProps = async ({ req }) => {
  const ip = req.headers["x-real-ip"] || req.connection.remoteAddress;
  return { ip };
};

codesandbox example

【讨论】：

它也给了我 (127.0.0.1)。我应该在 Nginx 中使用任何配置来将任何标头传递给请求吗？

【解决方案4】：

您可以使用类似request-ip 的包。然后在您的 API 路由中：

import requestIp from 'request-ip'

export default async function myRoute(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const detectedIp = requestIp.getClientIp(req)
}

【讨论】：

这个包给我一个错误的IP地址，因为IP地址的位置是错误的
ip地址错误是什么意思？它将报告从标头中提取的 IP 地址，它甚至会查找 x-forwarded-for 代理标头
它给了我一个与我的 IP 地址不同的 IP 地址，我应该在 nginx 上进行任何配置以传递这些标头吗？
它现在可以与这个解决方案一起使用，但是应该在 nginx.config 中添加一些配置来传递请求标头。