The server api cannot return data in blob format

[ifredom]

Environment

Environment

Nuxt project info:                01:30:27

------------------------------
- Operating System: Windows_NT
- Node Version:     v16.20.1
- Nuxt Version:     3.7.0
- CLI Version:      3.7.2
- Nitro Version:    2.6.2
- Package Manager:  pnpm@8.6.7
- Builder:          -
- User Config:      devtools, ssr, debug, experimental, app, runtimeConfig, nitro, modules, vite, css, components, imports, pinia, headlessui, colorMode, content
- Runtime Modules:  @nuxtjs/tailwindcss@6.8.0, nuxt-headlessui@1.1.4, nuxt-icon@0.4.2, @nuxtjs/color-mode@3.3.0, @pinia/nuxt@0.4.11, @vueuse/nuxt@10.2.1, @nuxt/content@2.7.0, @ant-design-vue/nuxt@1.1.0, @nuxtjs/i18n@8.0.0-rc.2
- Build Modules:    -
---

Reproduction

Reproduction

1. page: demo.vue

   
   <script lang="ts" setup>
   const axios = useNuxtApp().$axios
   
   const createAudio = async () => {
     const response: any = await axios({
       url:  '/api/baidu',
       method: "POST",
       data: {
         content: '123456',
       }
     })
    // The return value is null,  because the type is an audio blob
     console.log('--------------', response)
   }
   }
   </script>

2. Back-end server  : `server/api/baidu.ts`
```ts
import { H3Event } from "h3"
export default defineEventHandler(async (event: H3Event) => {

   let body = (await readBody(event)) as any

   const audioBlob = await text_to_short_audio()

   return {
       data: audioBlob,
       code: 0,
       msg: 'success'
   }

})

// text to audio
const text_to_short_audio = async (): Promise<Blob> => {

  const url = `https://tsn.baidu.com/text2audio`

  let params = {
    tex: "The logistics service attitude of domestic colleges and universities to students",
    tok: '25.a6415362d9c5aab2dfdab15a48b65644.315360000.2008079642.282335-38102597,
    lan: "zh",
    cuid: `sN2HwQ2bFyZCOoKp9l0wdIb5Q0oD1wKb`,
    ctp: '1',
    spe: '5', 
    pit: '5',
    vol: '5', 
    per: '1', 
    aue: '3' 
  };
  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': '*/*'
  };
  const res: Blob = await $fetch(url, { method: 'POST', params: params, headers: headers })

  console.log("-----------response-----------", res)

  return res
}

3. What should the back-end server do to return blob data？

Describe the bug

The server api cannot return data in blob format

Additional context

No response

Logs

The page fetched data  blob is empty

[markthree]

@ifredom Please try using it ↓

export default defineEventHandler(async (event: H3Event) => {
  const audioBlob = await text_to_short_audio();
  return {
    data: await audioBlob.text(),
    code: 0,
    msg: "success",
  };
});

Because if the return value is an object, it cannot be serialized effectively。

Of course, if no special information is needed, it is recommended to use ↓

export default defineEventHandler(() => text_to_short_audio());

[ifredom]

请尝试使用它↓

export default defineEventHandler(async (event: H3Event) => {
  const audioBlob = await text_to_short_audio();
  return {
    data: await audioBlob.text(),
    code: 0,
    msg: "success",
  };
});

因为如果返回值是对象，就不能有效地序列化。

当然，如果不需要特殊信息，建议使用↓

export default defineEventHandler(() => text_to_short_audio());

tks, it's work