axiosでbaseURLが無視されるケース

axios(v0.18.0)をサーバサイドで利用する際に計らずもbaseURLが無効になるケースがあった件のメモ。

経緯

BFFがバックエンドサーバのAPIを叩くはずがなぜか自ホスト上のポート80へアクセスするケースが発生していた。

原因

baseURLを指定した場合でもリクエストするパスが // から始まっているとbaseURLは無視され同サーバ上のポート80へリクエストされる。

const a = axios.create({
  baseURL: 'https://api.example.com',
});
a.get('//v1/hoge/api')

UnhandledPromiseRejectionWarning: Error: connect ECONNREFUSED 127.0.0.1:80

今回はパスの組み立て方が甘く// から始まるパスになってしまうケースがあったのだが、axiosでは // は絶対URLとして処理されるためbaseURLは無視される。その場合 // から始まるパスだけが nodeのhttp.request へ渡され、ホスト、ポート共に未指定のためデフォルトとしてlocalhost、ポートに80が適用されリクエストが送信されることになる。

プロトコル相対URLの扱いとしてaxiosをフロントエンド使う場合はこれで良いのだろうが、サーバサイドでは結構危うい挙動になってしまうので注意が必要。

#javascript