Remix 中这样获取 ip 地址

一、Remix 请求对象与 express request 不一样

Remix 遵循 Web 标准的 request和 response,而 Express 没有遵循。

Remix request 对象中并没有包含 ip 地址,但是社区中已经有了 ip 地址的获取方法。但是值得注意的是 remix 服务的 ip 地址是随 headers 一起。

本地开发的时候,headers 上是没有携带 ip 的 header,所以我们不能获取。

二、remix-utils

2.1)安装 remix- utils

sh 复制代码
pnpm add remix-utils

2.2)使用

ts 复制代码
import { getClientIPAddress } from 'remix-utils/get-client-ip-address'

三、以 nginx 为例

3.1)拥有一台服务器

最好有一台测试服务器,用于简单的测试。

3.2)nginx 相关命令

sh 复制代码
yum install nginx # 安装
sudo systemctl restart nginx # 重启

vim /etc/nginx/nginx.conf # 进入配置文件

3.3)打开服务器防火墙端口 5173,用于跑测试服务。

使用云服务器在后台配置以下即可。

3.4)写一个 nginx 简单的配置

sh 复制代码
server {
    listen 5173; # 监听的端口

    location / {
        proxy_pass http://127.0.0.1:5174; # 转发到本地的 5173 端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

我们监听 5173 端口,代理到本地的 5174 端口,这意味着我们的 remix 服务要启动到 5174 端口。

sh 复制代码
# 使用脚手架创建一个 remix 应用
npx create-remix@latest

接下来在 root.tsx 中添加 loader 看 ip 能够正常

ts 复制代码
import { getClientIPAddress } from "remix-utils/get-client-ip-address";

export async function loader({ request }: LoaderArgs) {
        let ipAddress = getClientIPAddress(request.headers);
        console.log("ipAddress", ipAddress)
        return null
}

指定端口启动:

sh 复制代码
pnpm run build # 在服务端构建
PORT=5174 pnpm run start --host # 指定端口和 host 显示 

四、访问

经过实际云服务检测,通过 nginx 是能够拿到 ip 地址的。所以在开发环境返回的 null 也是正常。

五、小结

在开发的时候,remix 框架可能会带来一些疑惑,我们可以在配合云服务器,迅速的测试我们的示例。希望能够帮助到读者朋友。

相关推荐
前端 贾公子3 分钟前
Monorepo + vite 怎么热更新
前端
昵称为空C7 分钟前
SpringBoot数据存储时区选择,符合国际化和特定时区方案
spring boot·后端
然我39 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子44 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
ldj20201 小时前
SpringBoot为什么使用new RuntimeException() 来获取调用栈?
java·spring boot·后端
超龄超能程序猿1 小时前
Spring 应用中 Swagger 2.0 迁移 OpenAPI 3.0 详解:配置、注解与实践
java·spring boot·后端·spring·spring cloud