Nuxt 3 生产环境下 API 错误消息无法访问的解决方案-js教程-PHP中文网

Nuxt 3 生产环境下 API 错误消息无法访问的解决方案

在 Nuxt 3 中，生产环境默认会剥离错误详情（如 message 和 statusMessage）以保障安全，导致客户端仅能获取 statusCode；实际错误信息需通过 err.data 对象访问，而非直接读取 err.message。

在 nuxt 3 中，生产环境默认会剥离错误详情（如 `message` 和 `statusmessage`）以保障安全，导致客户端仅能获取 `statuscode`；实际错误信息需通过 `err.data` 对象访问，而非直接读取 `err.message`。

Nuxt 3 的 $fetch 在捕获服务端抛出的 createError 时，会将完整响应体（包括 message、statusMessage 等字段）统一挂载到错误对象的 data 属性中，而非直接展开至错误实例顶层。这一设计在开发与生产环境中保持一致，但关键区别在于：生产构建会自动移除 err.message 和 err.statusMessage 的原始值（设为空字符串），以防止敏感信息泄露；而 err.data 始终保留服务端返回的原始 JSON 响应内容。

因此，正确访问错误消息的方式是：

async (body: any) => {
  try {
    const response = await $fetch("/example-api", {
      method: "POST",
      body,
    });
  } catch (err: any) {
    // ✅ 正确：从 err.data 中提取服务端返回的字段
    console.log(
      err.data?.message,        // "Test message"
      err.data?.statusMessage,  // "Test message"
      err.data?.statusCode      // 400
    );

    // ❌ 错误：err.message 在生产环境为空字符串
    console.log(err.message); // "[POST] /api/example-api: 400"（开发）或 ""（生产）
  }
};

⚠️ 注意事项：

err.data 是服务端响应体的完整解析结果（即 JSON.parse(responseBody)），其结构取决于你 defineEventHandler 中 throw createError(...) 的参数；

若需自定义错误响应格式（例如添加 code 或 details 字段），只需在 createError 中传入对应属性，它们同样可通过 err.data.code 访问；

在 Netlify 等无服务端渲染能力的静态托管平台，该行为不受影响——因为错误仍由 Nuxt 服务端 API（部署为 Serverless Function）生成，客户端仅消费其响应；

如需在开发阶段模拟生产行为，可在 nuxt.config.ts 中设置 runtimeConfig.public.isProduction = true 进行验证。