Nest.js 实战 (十四):如何获取客户端真实 IP

问题解析

Nest.js 应用中,当你试图通过 request.ip 获取客户端的 IP 地址时,如果总是返回 ::1 或者 ::ffff:127.0.0.1,这通常意味着请求来自本地主机。

因为在前后端分离应用中,前端请求后端服务一般的做法都是通过代理,::1IPv6localhost 地址,相当于 IPv4 中的 127.0.0.1,如果使用了本地代理,即配置了一个指向本地(localhost127.0.0.1)的代理,这个代理会导致前端的所有请求是从本地发出的。

要解决这个问题并获取客户端的真实 IP 地址,您需要确保代理服务器正确设置了转发头,比如 X-Forwarded-ForX-Real-IP,并且您的后端服务能够正确读取这些头信息来确定客户端的 IP 地址。

解决方式

以我个人为例,我的前端应用是用 1Panel 面板,网站搭建是用的 OpenResty,当我们配置一个反向代理到本地后端服务时,我们可以看到源文:

txt 复制代码
location ^~ /api {
    rewrite ^/api(.*) $1 break; # 重写规则,将/api之后的路径提取出来并去掉/api前缀
    proxy_pass http://127.0.0.1:6689; 
    proxy_set_header Host $host; 
    proxy_set_header X-Real-IP $remote_addr; // 设置 X-Real-IP 头为客户端的真实 IP 地址。这对于后端服务识别客户端 IP 地址非常重要,特别是在请求经过多个代理的情况下
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; // 设置 X-Forwarded-For 头为通过 proxy_add_x_forwarded_for 指令添加的信息。此头通常用于跟踪客户端 IP 地址以及任何之前的代理 IP 地址
    proxy_set_header REMOTE-HOST $remote_addr; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    proxy_set_header X-Forwarded-Proto $scheme; 
    proxy_http_version 1.1; 
    add_header X-Cache $upstream_cache_status; 
    add_header Cache-Control no-cache; 
    proxy_ssl_server_name off; 
}

我们可以写一个方法来获取代理后的地址:

ts 复制代码
import { Request } from 'express';
/**
 * @description: 获取客户端真实 IP
 * @param {Request} req
 */
export const getRealIp = (req: Request): string => {
  const result = req.headers['x-forwarded-for'] || req.headers['x-real-ip'] || req.socket.remoteAddress || req.ip;
  return Array.isArray(result) ? result[0] : result;
};

在代码中使用:

ts 复制代码
login(@Body() body: LoginParamsDto, @Session() session: CommonType.SessionInfo, @Req() req: Request) {
  return this.authService.login(body, session, getRealIp(req));
}

实际效果

演示地址:操作日志

相关推荐
光影少年1 天前
HashRouter 和 BrowserRouter 区别、底层原理、部署差异
前端·react.js·nestjs
悟空瞎说2 天前
NestJS 12 预览版重磅来袭:全面原生 ESM 正式落地
nestjs
Avan_菜菜5 天前
FRP 内网穿透完整实战:从 HTTP 映射到 HTTPS 自签代理
运维·nginx·https
ping某9 天前
为什么 Nginx 明明监听了 80,转发后端时却用了 4xxxx 端口?
后端·nginx
難釋懷11 天前
Nginx反向代理中的容错机制
运维·nginx
bloglin9999911 天前
Nginx高危漏洞CVE-2021-23017及配置样例
运维·nginx
进阶的小名11 天前
Spring Boot SSE + Nginx 配置:解决 EventSource 不实时返回、连接超时、流式响应被缓冲问题
spring boot·后端·nginx
難釋懷11 天前
Nginx获取客户端真实IP
服务器·前端·nginx
qq_谁赞成_谁反对11 天前
甲方IT的成长之路--nginx实战--2604
服务器·数据库·nginx
图灵追慕者11 天前
Nginx安裝以及配置顯示本地服務器文件夾
运维·nginx