ウェブ開発も最近は Node.js 一辺倒になってしまった在宅野良ブログラマ Mariyudu です。プログラム内で URL のオリジンを参照してごにょごにょしたりすることがたまにあるんですが、curl -H "Host: my-web-develop.net" http://localhost:3000/
的なことを Chrome にさせたいと思ったら意外に情報が無かったので、今回使ってみた ModHeader の話を。
ModHeader は HTTP ヘッダの内容を操作する Chrome 拡張機能です。つまり、上記ユースケースのように http://localhost:3000/ へのリクエストの際に任意の値をセットした Host ヘッダを付与できるということです。以下、今回行った手順です。
- Chrome ウェブストアから ModHeader をインストール。
- デフォルトだと他のウィンドウ・タブでも Host ヘッダが書き換えられてしまい嬉しくないので、設定から「サイトへのアクセス」を「クリックされた場合のみ」にしておく。>
- URL バーの ModHeader アイコンをクリックして、本ユースケース用のプロファイルを作成。といっても下図のようにプロファイル名とリクエストヘッダの Host をセットしておくだけ。>
- 開発中のウェブプログラムを起動しておいて、Chrome にて新しいウィンドウ(またはタブ)を開いて、URL に http://localhost:3000/ を入力してアクセスします。この時点では未だ Host ヘッダ設定は効いていません。
- そのウィンドウで、URL バーの ModHeader アイコンをクリックするとページをリロードしちゃいなよユー、って言っているので言う通りにすると、設定した Host ヘッダが適用されるようになります。それ以降はそのウィンドウからのアクセスでは、Host ヘッダ書き換えが適用され続けます。>
便利です。これで Vue.js や Express でのローカル開発はもちろん、リモートホスト開発での hosts を書き換えてテストしてたような案件もラクラクだにゃー。