axios.postでresponseが空白になる

Question

Nuxt.js + SpringBoot でログイン画面を作成しています。
axios.post後にresponseからauthorizationを取得しようとしているのですが
responseが空白で返ってくるので取得できません。

サーバーサイドはSpringBoot（SpringSecurity）で作成しています。

該当のソースコード

async login() {
// 取得先のURL
const url = '/login'
await this.$axios
.$post(
url,
{
userId: this.userId,
password: this.password
},
)
.then((response) => {
console.log(response) ←ここが""になる
console.log(response.headers.authorization)　←値を取得したい

      })
      .catch((error) => {
        alert(error)
      })

}

試したこと

Nuxt.jsのAuth Moduleを導入し、loginWithでアクセスした時は問題なくresponseが返ってきていました。
Auth Moduleなし（上記のコード）でアクセスするとresponseが空白で返ってきました。
ブラウザの開発者ツールではステータス200で問題なく返ってきています。
ヘッダーの中身はAuthModuleを導入しているときと同様でした。

考えられる問題点などアドバイスよろしくお願いします。

Answer 1

「@nuxtjs/axios」を利用されているかと思います。

このモジュール内で定義されているalias「$(get | post | patch ....)」の返却値は、「Promise<AxiosResponse>」ではありません。
https://github.com/nuxt-community/axios-module/blob/master/lib/plugin.js#L44

コードで表すと、以下の2つは同じ内容を出力します。

# $axios.get (prefix:)
$axios.get((res: AxiosResponse) => console.log(res.data))

# $axios.$get (prefix: $)
$axios.$get(res => console.log(res))

コードを以下のように修正して確認してみてください。

async login() {
  // 取得先のURL
  const url = '/login'
  await this.$axios
    .post(
      url,
      {
        userId: this.userId,
        password: this.password
      },
    )
    .then(response => {
      console.log(response.headers.authorization)
      // or
      // console.log(response.headers.Authorization)
    })
    .catch((error) => {
      alert(error)
    })
}

Comments

[kharu]

回答ありがとうございます。Nuxtでは違いがあるんですね。
ご指摘の通りに修正するとやりたかったことが出来るようになりました。
ありがとうございました！