nuxt+axiosでBasic認証をかけた状態で別のBasic認証が掛かったAPIを叩くと認証がコケる

表題の通り。

nuxt-basic-auth-moduleなどを使って、フロントにBasic認証をかけた状態で、更にBasic認証が掛かっているAPIなどaxiosのドキュメントにある方法で叩くと401となり認証に失敗する。

NGパターン

const { data } = await $axios.get('/endpoint', {
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  }
})

この方法で叩くと、nuxtにあるBasic認証のユーザー名・パスワードでAPIにアクセスしてしまい、ユーザー名・パスワードが異なる場合は401となる。

叩いたログをみたところ、headerのAutorizationがnuxtのbasic認証で上書きされる(or axiosが上書きしない)ようだった。

NGパターン

const username = 'janedoe'
const password = 's00pers3cret'
const basicAuth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64')
const { data } = await $axios.get('/alives', {
  headers: { 'Authorization': basicAuth }
})

上記のとおり，強制的にheaderを指定したら200になった。