在 Nuxt 3 中，生产环境（如 Netlify 部署）下通过 $fetch 捕获的 API 错误对象不再直接暴露 message 和 statusMessage 字段，需从 err.data 中提取原始响应内容。
在 nuxt 3 中，生产环境（如 netlify 部署）下通过 `$fetch` 捕获的 api 错误对象不再直接暴露 `message` 和 `statusmessage` 字段，需从 `err.data` 中提取原始响应内容。
Nuxt 3 的 $fetch 在处理服务端抛出的错误（如 createError）时，会将完整的错误响应体封装在 err.data 属性中，而非扁平化到错误实例顶层。这一设计在开发环境可能因调试机制表现不同，但在生产构建（尤其是 SSR/SSG 部署场景）下严格遵循标准化错误结构——所有自定义错误字段（如 message、statusMessage、url）均位于 err.data 内部对象中。
因此，正确访问方式如下：
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本身是FetchError实例（继承自Error），其message属性默认仅包含请求摘要（如"[POST] /api/example-api: 400"），不包含服务端业务错误消息； -
err.data是服务端响应的 JSON 解析结果，与你defineEventHandler中throw createError({...})所定义的字段完全一致； - 若使用 TypeScript，建议为
err添加类型断言（如err as { data: { message: string; statusMessage: string; statusCode: number } }）以获得类型安全； - 此行为与部署平台无关（Netlify/Vercel/Node.js 服务均一致），本质是 Nuxt 3 的
$fetch错误标准化策略，非平台限制。
✅ 最佳实践：统一从 err.data 提取业务错误信息，并配合 err.status（HTTP 状态码）做分级处理：
catch (err: any) {
const errorData = err.data || {};
const status = err.status || errorData.statusCode;
if (status === 400) {
alert(`输入错误：${errorData.message || '请检查表单'}`);
} else if (status >= 500) {
alert('服务器异常，请稍后重试');
}
}掌握这一数据结构差异，即可确保错误提示在开发与生产环境中行为一致，提升用户体验与调试效率。
