

### 実現したいこと

Nuxt3のuseAsyncDataメソッドのhandler引数にaxiosのラッパーメソッドを渡して、サーバーサイドでもapiと通信したい。

### ソースコード

[code]

    <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>
    
[/code]

[code]

    export default () => {
      async get<T> (path: string) {
         // 簡略化のため省略
         const res = await axios.get(baseURL + path)
         return res.data
      }
    }
    
[/code]

### 問題

クライアントサイドでバックエンドと通信を行う場合は、dataを取得できていますが、サーバーサイドでバックエンドと通信を行う場合にdataを取得できません。  
また、useAsyncDataのhandler引数にaxiosのラッパーメソッドではなくaxios関数をそのまま渡した場合はクライアントサイド・サーバーサイドの両方で通信が成功します。

[code]

    <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>
    
[/code]

なぜaxiosのラッパーメソッドをハンドラー引数として使用した場合に、サーバーサイドの通信が失敗するのかを教えていただきたいです。


CC BY-SA 4.0
2023-06-10T02:16:51.343
95172
2023-06-10T02:16:51.343
56179
question
vue.js nuxt.js axios
Nuxt3のuseAsyncDataのhandlerにaxiosのラッパーメソッドを渡すとサーバーサイドでのみ動かなくなる