NextJS - 如何配置代理来记录 api 请求和响应?

Posted

技术标签:

【中文标题】NextJS - 如何配置代理来记录 api 请求和响应?【英文标题】:NextJS - how to configure proxy to log api requests and responses? 【发布时间】:2022-01-09 02:42:33 【问题描述】:

我遇到了 Cloudinary Node SDK 的问题,其中管理资源端点偶尔会引发 302 错误。他们的支持建议我代理请求,以便我可以记录我的 api 和他们的 SDK 之间的响应,并最终更好地了解可能导致问题的原因(最后他们希望看到位于响应)。

他们的建议之一是使用 Charles Proxy,但我对它的工作原理非常陌生,无法弄清楚。我已经阅读了 Charles 文档并用了一整天的谷歌搜索,但我找不到任何与 NextJS API 和 Cloudinary SDK 之间的代理相关的信息。

如何设置 Charles Proxy 以便以这种方式查看请求和响应?还有另一种我不知道的方法可以代替吗?由于我使用的是最新版本的 NextJS v12,我可以改用新的 _middleware 选项吗?在后来的建议中,他们的支持也发表了这样的评论:

if you can't proxy requests to localhost, you may be able to use a local DNS server or a local override so you can access your local IP using a different hostname (e.g. using /etc/hosts on a unix environment, or C:\Windows\System32\Drivers\etc\hosts on a windows PC) and have that proxied - that said, there's probably an easier way using a Node project or adjusting the settings of the Node server.

但我也不知道从哪里开始。

这是我的 api 代码: pages/api/auth/images.ts

import type  NextApiRequest, NextApiResponse  from 'next';
import cloudinary from 'cloudinary';
require('dotenv').config();

export default async function handler(_: NextApiRequest, res: NextApiResponse) 
  cloudinary.v2.config(
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
    secure: true,
  );

  try 
    // fetch cloudinary auth images
    const response = await cloudinary.v2.api.resources(
      type: 'upload',
      prefix: 'my_app/auth_pages',
      max_results: 20,
    );

    // fetch random image
    const randImage =
      response.resources[~~(response?.resources?.length * Math.random())];

    // return image
    return res.status(200).json( image: randImage );
   catch (error) 
    console.dir( error ,  colors: true, depth: null );
    return res.status(500).json( error );
  

注意:我使用的是 Mac。

【问题讨论】:

【参考方案1】:

尝试以下方法:

export default async function handler(_: NextApiRequest, res: NextApiResponse) 
  cloudinary.v2.config(
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
    api_proxy: 'http://<local_ip>:<charles_port>', //change accordingly
    secure: true,
  );

要获取端口号,在 Charles Proxy 中转到 Proxy > Proxy Settings。

【讨论】:

以上是关于NextJS - 如何配置代理来记录 api 请求和响应?的主要内容,如果未能解决你的问题,请参考以下文章

vue项目nginx必备配置-----API 接口代理

如何在 NextJS 中为 getStaticProps 导入 API 路由?

微服务Kong——添加插件

基于nextJS的React 服务端渲染

身份 aspnet 核心微服务

Nextjs API 请求仅在本地有效