Lambda内からcloudfrontへのaxiosリクエストが403になる

ニッチなネタですが、同じくお困りの方がいらっしゃったらご参考にどうぞ

アーキテクチャ

cloudfront -> api gateway -> lambda(nuxt)

この環境で

nuxt(axios) -> (out bounds) -> HTTP API(cloudfront)

このようにaxiosを利用して外部のサービスで、そのサービスがcloudfrontを利用している場合、その通信は403となり失敗します。

原因

axiosでリクエストする際に付与しているヘッダー情報に原因がありました。
viaです。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Via

これはcloudfrontで付与されて、そのままapi gateway、lambdaへと引き継がれ、axiosのデフォルトヘッダーに設定されていました。

改善

cloudfrontでは多段構成を禁止する仕組みとしてこのviaを利用しているようで、このヘッダーを消すことで無事疎通が可能となりました。

nuxt(plugins)

export default ({ $axios }: Context) => {
  $axios.defaults.headers.common = {}
}

※この例では初期設定値をすべて消しています。