Nuxt3 Nitro服务向前端返回Base64时出现431错误如何解决

这个431报错和浏览器缓存、默认请求头大小限制没有关系，是两处逻辑问题叠加导致的：

• 服务端接口直接返回裸Base64字符串时，Nuxt3底层使用的H3服务框架会误将/开头、带路径分隔符的字符串识别为重定向目标地址，自动返回302重定向响应，把完整的Base64字符串写入Location响应头。
• 浏览器收到302响应后会自动向Location指向的地址发起请求，也就是把几KB到几十KB的Base64字符串作为请求路径拼接到当前域名下，超长的请求路径触发服务端的请求头/请求行长度限制，最终抛出431错误，也就是你看到的请求地址为http://localhost:3000/9j/4AAQSkZJRg...的异常。

按推荐优先级选择即可：

• 方案1：快速修复现有逻辑
  将接口返回值包装为JSON对象，彻底避免H3的重定向误判，修改服务端代码：

  // 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`
    try {
      const base64Str = await imageToBase64(url)
      // 包装为对象返回，框架会自动识别为JSON响应
      return {
        data: base64Str
      }
    } catch (error) {
      console.error('图片转换失败:', error)
      return {
        error: '图片获取失败'
      }
    }
  })
  

  前端对应调整取值逻辑，注意如果要将Base64作为图片src使用，必须拼接Data URI前缀，否则浏览器会将裸Base64识别为相对路径发起无效请求：

  // test.vue
  const res = await $fetch(`/api/image?query=${el.id}`)
  // 拼接前缀后才能作为图片地址使用
  const imgSrc = res.data ? `data:image/jpeg;base64,${res.data}` : ''
  

• 方案2：性能更优的实现（推荐）
  完全不需要做Base64转换，服务端直接代理返回原图二进制流即可，相比Base64能减少30%左右的传输体积，也不会出现格式解析问题：

  // server/api/image.js
  export default defineEventHandler(async (event) => {
    const param = useQuery(event)
    const url = `https://images-assets.nasa.gov/image/${param.query}/${param.query}~thumb.jpg`
    const imgResponse = await fetch(url)
    // 设置正确的图片响应头
    setHeader(event, 'Content-Type', 'image/jpeg')
    // 直接返回图片流
    return imgResponse.body
  })
  

  前端不需要额外请求处理，直接把接口地址作为img的src属性即可：

  <img :src="`/api/image?query=${el.id}`" alt="NASA图片" />
  

• 方案3：兼容返回纯字符串的场景
  如果业务要求必须返回纯文本Base64，手动设置响应头明确响应类型，阻止框架自动识别重定向：

  // 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`
    // 明确指定响应类型为普通文本
    setHeader(event, 'Content-Type', 'text/plain; charset=utf-8')
    event.node.res.statusCode = 200
    return await imageToBase64(url)
  })
  

内容的提问来源于stack exchange，提问作者wittgenstein