Nuxt3 v3.8.1中请求失败时无法加载响应数据且onResponseError钩子不触发的问题排查

看起来你在Nuxt3 v3.8.1里遇到了两个关联的头疼问题：请求失败时浏览器一直提示failed to load response data no data found for resource with given identifier，同时自定义的useApiFetch里的onResponseError钩子完全没反应，而onRequest却能正常工作对吧？我来帮你一步步拆解和解决这个问题。

首先先明确这个错误提示的本质：它通常不是Nuxt或ofetch的锅，而是浏览器层面的问题——要么请求在到达服务器之前就被拦截了（比如CORS问题、网络中断），要么服务器返回的错误响应不符合HTTP规范（比如只返回了错误状态码但没有任何响应体），导致浏览器无法解析响应数据，才会抛出这个提示。而onResponseError不触发，恰恰说明ofetch根本没接收到服务器的错误响应，请求大概率在更早的阶段就失败了。

下面是具体的排查和解决步骤：

1. 先确认请求是否真的到达了服务器 #

打开浏览器的Network面板，找到失败的请求，重点看这两个字段：

• 如果Status显示(failed)或cors error：说明请求在浏览器层面就被拦截了，根本没发到服务器，这时候onResponseError自然不会触发——因为连响应都没有。
• 如果Status是4xx/5xx，但Response标签页显示“Failed to load response data”：说明请求到了服务器，但服务器返回的错误响应没有响应体，或者响应体格式有问题，导致浏览器无法解析。

2. 修正CORS中间件的配置（你已经加了，但可能有问题） #

你提到在server/middleware/cors.ts里加了CORS配置，但看你给出的代码有重复的Access-Control-Expose-Headers，而且没处理OPTIONS预检请求，这会导致带自定义头（比如你的Authorization）的请求被浏览器拦截。正确的Nuxt3 CORS中间件应该是这样的：

export default defineEventHandler((event) => {
  setResponseHeaders(event, {
    'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Allow-Headers': '*',
    'Access-Control-Expose-Headers': '*',
  })
  // 必须处理OPTIONS预检请求，否则复杂请求会被拦截
  if (getMethod(event) === 'OPTIONS') {
    event.res.statusCode = 200
    return ''
  }
})

3. 完善useApiFetch的错误捕获逻辑 #

ofetch的onResponseError只负责处理服务器返回的错误响应，但网络错误、CORS错误这类请求阶段的错误会直接触发Promise的reject，不会走到这个钩子。你需要手动捕获这些全局错误：

export const useApiFetch = (url: string, options: any): any => {
  const config = useRuntimeConfig()
  const { accessToken } = storeToRefs(useAuthStore())

  options.baseURL = config.public.apiBaseUrl
  options.key = url

  return ofetch(url, {
    ...options,
    onRequest({ options }) {
      options.headers = options.headers || {}
      if (accessToken.value) {
        options.headers.authorization = `Bearer ${accessToken.value}`
      }
    },
    onResponseError({ response }) {
      console.log('onResponseError触发:', response)
    }
  }).catch((error) => {
    // 捕获所有请求错误，包括网络错误、CORS错误等
    console.log('请求全局捕获错误:', error)
    // 抛出错误让调用方处理，或者在这里统一处理
    throw error
  })
}

4. 检查服务器端的错误响应规范 #

如果请求确实到达了服务器，但返回的错误响应没有响应体，浏览器就会提示“Failed to load response data”。你可以在服务器端配置：当返回4xx/5xx状态码时，至少返回一个包含错误信息的响应体，比如：

{ "error": "请求参数错误", "code": 400 }

这样浏览器能正常解析响应，onResponseError也能拿到完整的响应对象。

5. 尝试用Nuxt原生的useFetch封装（更贴合Nuxt生态） #

如果你之前试过useFetch但没解决，可以试试这个封装方式，它会自动处理Nuxt的状态管理和错误捕获：

export const useApiFetch = (url: string, options: any = {}) => {
  const config = useRuntimeConfig()
  const { accessToken } = storeToRefs(useAuthStore())

  return useFetch(url, {
    baseURL: config.public.apiBaseUrl,
    key: url,
    ...options,
    headers: {
      ...options.headers,
      ...(accessToken.value ? { authorization: `Bearer ${accessToken.value}` } : {})
    },
    onResponseError({ response }) {
      console.log('useFetch错误响应:', response)
    }
  })
}

调用时可以直接通过返回的error对象获取错误信息，更符合Nuxt的使用习惯。

总结一下：你的问题大概率是CORS配置不正确导致请求被浏览器拦截，或者服务器返回的错误响应不符合规范。先通过Network面板确认请求状态，再依次修正CORS中间件、完善错误捕获逻辑，应该就能解决问题了。

备注：内容来源于stack exchange，提问作者Eoylka