解决在 Next.js SSR 模式中获取 X-Forwarded-For ip 的问题

在进行 Next.js 服务端渲染(SSR)的过程中，我们经常会遇到需要获取客户端 ip 的需求，特别是在需要限制访问次数或进行统计分析时，获取用户真实的 ip 是非常必要的。

然而，由于 SSR 架构的特殊性，我们不能直接在客户端通过 window.location 的方式获取 ip 地址，而是需要在服务端通过一定的方法进行获取。这里主要介绍一种常见的获取方法：通过 X-Forwarded-For 头来获取真实 ip 地址。

X-Forwarded-For 头

HTTP 协议的请求报文中，虽然有一个 REMOTE_ADDR 字段表示客户端的 ip 地址，但是该字段并不一定能准确表达客户端的真实 ip 地址，尤其是在经过多层反向代理服务器的情况下。

因此，HTTP 协议中引入了一个名为 X-Forwarded-For 的字段，用于表明客户端的真实 ip 地址。当一个请求经过多层反向代理时，该字段会依次记录每个代理服务器的 ip 地址，从左到右按访问顺序排列，使用逗号分隔，例如：

X-Forwarded-For: 192.168.1.100, 192.168.2.100, 192.168.3.100

表示该请求先经过 192.168.1.100，再经过 192.168.2.100，最后由 192.168.3.100 转发到服务器。

获取 X-Forwarded-For ip

在 Next.js SSR 模式中，我们可以通过 req.headers 来获取请求头中的 X-Forwarded-For 字段，并取出其第一个 ip 地址作为客户端真实 ip，示例代码如下：

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const xForwardedFor = req?.headers?.['x-forwarded-for'];
  const ip = xForwardedFor?.split(',')[0] || req.connection.remoteAddress;

  // TODO: 对获取到的 ip 进行相关操作
}

其中 || 表示如果 x-forwarded-for 字段不存在或为空，则使用 req.connection.remoteAddress 来作为客户端 ip。

需要注意的是，由于 x-forwarded-for 字段可以被伪造，因此我们需要对获取到的 ip 进行安全性判断和过滤。

总结

在 Next.js SSR 模式中，获取客户端真实 ip 的方法是通过获取请求头中的 X-Forwarded-For 字段，并取其第一个地址作为客户端 ip。同时需要注意安全性问题，并对获取到的 ip 进行过滤和判断。

希望这篇文章对你有帮助，如果还有其他关于 Next.js SSR 的问题，可以在评论区留言交流。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654dc9517d4982a6eb72c618