如何获取部署在Vercel上的Next.js应用的客户端IP地址？

问题原因 #

你的前端应用（example.com）和API（api.example.com）都部署在Vercel上，当前端向API发起请求时，请求实际是从Vercel的边缘服务器发出的，而非用户的浏览器，所以API接收到的x-forwarded-for只会是Vercel服务器的IP，而非真实客户端IP。

解决方案 #

方法1：前端传递真实IP到API #

1. 在前端获取真实客户端IP

   • 如果是服务器端渲染（SSR）页面，在getServerSideProps中从请求头获取：

     export async function getServerSideProps(context) {
       const clientIp = context.req.headers['x-forwarded-for']?.split(',')[0] || context.req.connection.remoteAddress;
       return { props: { clientIp } };
     }
     

   • 如果是客户端组件，可通过内部API路由获取，比如创建/api/get-client-ip：

     // pages/api/get-client-ip.js
     export default function handler(req, res) {
       const clientIp = req.headers['x-forwarded-for']?.split(',')[0] || req.connection.remoteAddress;
       res.status(200).json({ ip: clientIp });
     }
     

     再在客户端组件中调用该接口拿到IP。

2. 请求API时携带IP
   前端调用api.example.com接口时，通过自定义请求头发送真实IP：

   fetch('https://api.example.com/your-endpoint', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       'X-Client-IP': clientIp // 传入获取到的真实IP
     },
     body: JSON.stringify(yourData)
   });
   

3. API端读取自定义请求头
   在api.example.com的接口中，读取X-Client-IP请求头记录真实IP：

   export default function handler(req, res) {
     const realClientIp = req.headers['x-client-ip'];
     console.log('真实客户端IP:', realClientIp);
     // 其他业务逻辑
     res.status(200).json({ success: true });
   }
   

方法2：使用Vercel边缘中间件获取IP #

如果你的API是Next.js API路由，可通过边缘中间件直接获取原始客户端IP，无需前端传递：

1. 创建middleware.ts（或.js）文件：

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   
   export function middleware(request: NextRequest) {
     // 获取真实客户端IP
     const realIp = request.ip || request.headers.get('x-forwarded-for')?.split(',')[0];
     // 将IP添加到请求头传递给API路由
     const requestHeaders = new Headers(request.headers);
     requestHeaders.set('X-Real-Client-IP', realIp || 'unknown');
     return NextResponse.next({
       request: {
         headers: requestHeaders,
       },
     });
   }
   
   // 指定中间件生效的API路径
   export const config = {
     matcher: '/api/:path*',
   };
   

2. 在API路由中读取X-Real-Client-IP请求头即可获取真实IP。

注意事项 #

• 自定义请求头建议使用X-前缀，避免和标准请求头冲突。
• 使用边缘中间件时，确保Vercel项目已启用边缘函数支持（默认Next.js项目均支持）。

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