I'm currently working on a project to learn more about Nuxt 3.

I am transforming an image on the server side and want to return a base 64 string back to the client:

// server/api/image.js
import imageToBase64 from 'image-to-base64'
export default defineEventHandler(async (event) => {
  const param = useQuery(event)
  const url = 'https://images-assets.nasa.gov/image/' + param.query + '/' + param.query + '~thumb.jpg'
  return await imageToBase64(url)
    .then(response => {
        return response // base 64
      })
    .catch(error => console.log(error))
})

// test.vue
const base64 = await $fetch(`/api/image?query=${el.id}`)

But I got an 431 error and don't know the right approach to fix the problem.

GET http://localhost:3000/9j/4AAQSkZJRgABAQAAAQABAAD/wAALCAIAAoABAREA/8QAHwAAAQUBACQoL/ [...] [HTTP/1.1 431 Request Header Fields Too Large 0ms]

Do you have any ideas? I only read about to clearing my browser cache...