如何使用 Fiddler & Charles Proxy 监控 NextJS 应用服务器后端

Question

如何使用 Fiddler 或 Charles Proxy 等代理

Nextjs app router

，

我不是谈论 Nextjs 配置重写功能。

我有一个 Nextjs 14.0 应用程序（带有新的应用程序路由器），带有服务器组件和 Api 路由 向其他几个第 3 方 api 发出请求以获取数据。我想拦截这些请求（特别是在本地开发时），以便我可以监视/排除请求故障（查看请求是否使用所有正确的参数发送）。

我可以通过将代理服务器连接到传入请求来轻松地在 Express 应用程序中完成此操作。我找不到任何有关如何在 Nextjs 应用程序路由器中执行此操作的文档。

使用 Charles 代理：我能够监控从客户端（浏览器）到应用程序服务器的请求，但看不到从服务器到后端第 3 方 api 的任何请求

使用 Charles 代理：我能够监控从客户端（浏览器）到应用程序服务器的请求，但看不到从服务器到后端 3rd 方 api 的任何请求

Answer 1

所以，我也遇到了同样的事情。 我还没有确切地弄清楚如何总体上做到这一点，但如果您有能力为第 3 方 API 设置请求主机，您可以通过反向代理功能来完成此操作。

具体来说，我为

apollo

和 graphql 执行了此操作，我在 apollo 的配置中执行了以下操作。我基本上有以下代码：

import {createHttpLink } from "@apollo/client";
const makeClient = () => {
    const httpLink = createHttpLink({
        uri: process.env.NEXT_PUBLIC_APOLLO_GATEWAY_URL
    });
};

我在 Charles 中配置了一个“反向代理”，它在“代理”菜单项下找到“反向代理...”。 我将本地端口设置为未使用的内容 (

4004

)，并将远程 URL 和端口设置为

.env

文件中设置的值（我在下面将它们称为

ServerHost

和

ServerPort

）

在我的

.env

文件中，我将

NEXT_PUBLIC_APOLLO_GATEWAY_URL

更改为

http://localhost:4004/graphql

，之前它是

http://<ServerHost>:<ServerPort>/graphql

这将强制通过 Charles 进行特定的 API 连接。 这也有助于最大限度地减少 Charles 在主要代理上运行它时产生的噪音。