実現したいこと
Nuxt3のuseAsyncDataメソッドのhandler引数にaxiosのラッパーメソッドを渡して、サーバーサイドでもapiと通信したい。
ソースコード
<script setup lang="ts">
import request from '@/utils/request'
const {data} = await useAsyncData<T>(async () => {
const data = await request.get<T>('/api/example')
return data
})
</script>
<template>
// クライアントサイド apiと通信できている
// バックエンド apiと通信できずdata.value === nullになる
{{ data }}
</template>
export default () => {
async get<T> (path: string) {
// 簡略化のため省略
const res = await axios.get(baseURL + path)
return res.data
}
}
問題
クライアントサイドでバックエンドと通信を行う場合は、dataを取得できていますが、サーバーサイドでバックエンドと通信を行う場合にdataを取得できません。
また、useAsyncDataのhandler引数にaxiosのラッパーメソッドではなくaxios関数をそのまま渡した場合はクライアントサイド・サーバーサイドの両方で通信が成功します。
<script setup lang="ts">
const {data} = await useAsyncData<T>(async () => {
const res = await axios.get<T>('http://localhost:8080/api/example')
return res.data
})
</script>
なぜaxiosのラッパーメソッドをハンドラー引数として使用した場合に、サーバーサイドの通信が失敗するのかを教えていただきたいです。