使用 Proxyman 抓取 Next.js 服务端的 HTTP 请求

1. 问题

在服务端 Next.js 中使用 fetch() 发起 HTTP/HTTPS 请求时，网络调试非常困难。变通的办法是使用 console.log() 在终端应用中打印请求和响应。

因此，在包含数百个请求的大型代码库中调试，简直是一场噩梦。

本文涵盖以下内容：

如何使用 Proxyman 抓取 Next.js 15 服务端的 HTTP/HTTPS 请求

2. 解决方案

Proxyman 提供了 Automatic Setup 功能，它会打开一个预先配置好的终端应用。在此终端中启动 Next.js 服务器后，Proxyman 会自动抓取你的 Next.js 项目中的所有 HTTP/HTTPS 流量。

优势：

无需配置代理
无需信任 Proxyman 证书
开箱即用
比使用 Reverse Proxy 工具更容易设置

下面是具体步骤：

当你需要每个请求都发送到服务器时，使用 cache: 'no-store' 告知 fetch() 不要复用已缓存的结果。

export default async function MyPage() {
    const res = await fetch('https://httpbin.org/anything', { cache: 'no-store' })
    return <div>My Page{res.text()}</div>
}

=> 缓存行为取决于 Next.js 版本，以及路由是提前构建还是按请求渲染。开发环境的热重载也可能复用 Server Component 的 fetch 结果。 => { cache: 'no-store' } 会让 Next.js 每次都从远程服务器获取数据，在通过 Proxyman 验证调用时非常有用。

打开 Proxyman -> Setup -> Automatic Setup -> Open new Terminal

在此终端中，使用 npm run dev 启动你的 Next.js 项目

完成！所有来自 fetch() 的 HTTP/HTTPS 请求都会被 Proxyman 抓取并拦截。

3. 后续

如果你更习惯使用自己的终端应用，可以使用 Manual Setup。请参阅以下文档了解具体设置方法：https://proxyman.com/docs/automatic-setup/manual-setup
Automatic/Manual Setup 工具支持 Node.js、Python 和 Ruby。

请在 Proxyman 打开的终端中运行 Next.js 命令，该设置只对这个终端会话生效。如果某个调用仍然没有显示，请通过整页跳转（而不是热重载）触发请求，并确认该代码路径确实在服务端运行。浏览器端的 fetch 调用则需要遵循浏览器的设置。

Noah Tran

2024年6月10日