NextJS v12 如何配置代理来记录Cloudinary SDK API的请求与响应

Cloudinary Node SDK底层基于Axios发起请求，你可以直接通过配置禁止自动跟随重定向、添加响应拦截器，直接打印302响应的Location字段，不需要安装任何额外工具。修改你的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,
    // 新增以下axios配置
    axios_config: {
      maxRedirects: 0, // 禁止自动跟随3xx重定向，直接暴露原始响应
      interceptors: {
        response: (resp) => {
          console.log('Cloudinary正常响应头：', resp.headers);
          return resp;
        },
        error: (err) => {
          if (err.response) {
            console.log('响应状态码：', err.response.status);
            console.log('完整响应头：', err.response.headers);
            // 直接打印302的Location字段
            if (err.response.status === 302) {
              console.log('302重定向地址：', err.response.headers.location);
            }
          }
          return Promise.reject(err);
        }
      }
    }
  });

  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 });
  }
}

如果你需要用Charles完成捕获，按以下步骤操作即可：

• 打开Charles，顶部菜单栏选择Proxy > Proxy Settings，确认HTTP代理端口为默认的8888，勾选Enable transparent HTTP proxying
• 安装Charles根证书：顶部菜单栏选择Help > SSL Proxying > Install Charles Root Certificate，打开钥匙串访问后找到Charles的证书，双击进入信任设置，将所有权限改为「始终信任」
• 开启Cloudinary域名的SSL代理：顶部菜单栏选择Proxy > SSL Proxying Settings，勾选Enable SSL Proxying，点击Include列表的添加按钮，Host填*.cloudinary.com，Port填443
• 给NextJS进程配置代理：启动项目前在终端依次执行以下命令，再启动开发服务

  export HTTP_PROXY=http://localhost:8888
  export HTTPS_PROXY=http://localhost:8888
  export NODE_TLS_REJECT_UNAUTHORIZED=0 # 仅开发环境临时使用，忽略自签名证书校验
  npm run dev
  

• 此时所有Cloudinary的请求都会显示在Charles的请求列表中，找到状态码为302的响应，直接在Headers标签页即可查看Location字段

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
如果上述代理配置不生效，可按以下步骤操作：

• 终端执行sudo nano /etc/hosts，输入密码后在文件末尾添加一行：127.0.0.1 local-dev.myapp.com，按Ctrl+O保存，Ctrl+X退出
• 启动NextJS服务时添加绑定参数：npm run dev -- -H 0.0.0.0
• 后续通过http://local-dev.myapp.com:3000访问本地站点，再配合Charles的代理配置即可正常捕获请求

NextJS 12的_middleware仅能拦截客户端到NextJS服务端的请求，无法拦截NextJS服务端内部调用第三方接口的请求，因此该方案无法满足你的需求。

内容的提问来源于stack exchange，提问作者J. Jackson