axios（NodeJS）の HTTP/HTTPS リクエストをキャプチャ

このブログで扱う内容

Proxyman を使い、NodeJS の axios ライブラリから HTTP/HTTPS のリクエスト/レスポンスをキャプチャする方法

1. axios で HTTPS リクエストを送信する

JavaScript/NodeJS の開発者であれば、axios ライブラリを使って HTTP/HTTPS の REST リクエストを送信することがよくあります。axios は、Promise ベースの便利な API を提供しており、リクエストの送信を簡単にします。

axios の利点は次のとおりです。

使いやすい：axios は HTTP リクエストを送信するための使いやすい API を提供しており、Web 開発者に人気の選択肢となっています。
クロスプラットフォーム対応：axios はブラウザと Node.js の両方で使えるため、Web アプリケーションを開発する人にとって汎用性の高い選択肢です。
Promise に対応：axios は Promise に対応しており、非同期リクエストを可能にし、レスポンスの処理を簡単にします。
キャンセルに対応：axios にはリクエストをキャンセルする仕組みがあります。これは、ユーザーがページから移動した場合や、リクエストの完了に時間がかかりすぎる場合に役立ちます。
インターセプター：axios はインターセプターに対応しており、送信または受信される前のリクエストやレスポンスを変更するために使えます。
エラー処理：axios は優れたエラー処理を備えており、開発者はアプリケーション内のエラーを簡単に処理できます。
JSON データの処理：axios は、サーバーから受信した JSON データを自動的にパースし、リクエストで送信する JSON データを変換できます。

次のサンプルコードは、axios ライブラリでリクエストを送信する方法を示しています。

import axios from 'axios';

var response = await axios.get("https://google.com");
console.log(response);

response = await axios.get("https://httpbin.org/get?lib=axios&schema=https");
console.log(response);

response = await axios.get("http://httpbin.org/get?lib=axios&schema=http");
console.log(response);

実行手順は次のとおりです：

サンプルコードを main.js として保存します
そのディレクトリでターミナルを開き、npm init -y を実行して、シンプルなパッケージを作成します。
axios をインストールします：npm install axios
node main.js を実行します
完了です。

2. HTTP/HTTPS のリクエスト/レスポンスをキャプチャする方法

現状の問題

axios は、デフォルトではシステムの HTTP プロキシ設定を参照しません。そのため、Proxyman や他の Web デバッグプロキシ（例：Charles Proxy、Fiddler）では、axios のリクエスト/レスポンスは一切表示されません。

これを解決するには、プロキシを手動で設定する必要があります。以下は設定例です。詳しくは Axios Documentation をご覧ください。

var response = await axios.get({
    url: "https://google.com",

    // Provide a Proxy config
    proxy: {
        protocol: 'https',
        host: '127.0.0.1',
        port: 9090
      },
});

ソースコードを手動で変更する必要があるため、ミスが起きやすく、時間もかかります。

解決策 ✅

幸いなことに、Proxyman には、設定なしで HTTP/HTTPS のリクエスト/レスポンスをキャプチャできる機能があります。

最新の macOS 版アプリを https://proxyman.com/ からダウンロードします
Mac に Proxyman の証明書をインストールします。Certificate メニュー -> Install Certificate on this Mac… を開き、「Install & Trust」ボタンをクリックすればインストールできます。

Setup メニュー -> Automatic を開き、「New Terminal app…」をクリックします

設定不要で Axios の HTTP 通信をキャプチャできる、事前設定済みのターミナルアプリを開く

新しいターミナルアプリが表示されます。これは事前設定済みの Apple の Terminal アプリで、axios からの HTTPS 通信を自動的にキャプチャして復号します。
新しいターミナルアプリで、もう一度 node main.js を実行します。すると、すべての HTTP/HTTPS 通信が Proxyman によってキャプチャされ、復号されます 🎉

axios のリクエストを送信し、Proxyman で HTTP リクエストを確認

完了です。

仕組みの詳細を知りたい場合は、こちらの Automatic Setup のドキュメントをご覧ください
普段お使いのターミナル（iTerm2 や Hyper など）を使いたい場合は、Manual Setup をご覧ください。

対応しているその他の NodeJS ライブラリ

Proxyman は、Axios、got、superagent、fetch、node-fetch に標準で対応しています。

まとめ

axios を使う NodeJS スクリプトから HTTP/HTTPS 通信をキャプチャするのは、ミスが起きやすく時間もかかります。しかし、Proxyman の Automatic Setup を使えば、設定なしかつワンクリックで実現できます。

この設定は、そのセッションに限定されるため、node main.js は Proxyman が開いたターミナル内で実行してください。シェルのプロファイルは変更されません。それでも通信が表示されない場合は、コードが独自の Axios エージェントや proxy オプションを指定していないか確認してください。そのうえで、同じターミナルから素の Node の fetch リクエストを送ってみてください。これにより、アプリの設定の問題か、セットアップの問題かを切り分けられます。

Proxyman は、iOS デバイス、iOS シミュレータ、Android デバイス上のアプリやドメインの HTTP(S) 通信をキャプチャして検査できる、高性能な macOS アプリです。

入手はこちら：https://proxyman.com/

Noah Tran

2023年5月14日