Nuxt 3生产环境无法获取API错误消息，本地正常（Netlify部署）

问题描述 #

本地开发环境中，客户端能正常获取Nuxt 3 API端点返回的错误消息，但部署到Netlify生产环境后，仅能获取状态码，无法访问错误消息。虽然浏览器能看到响应中包含错误消息，但该消息在error对象中不可用。

服务端API代码 #

// /server/api/example-api.ts
export default defineEventHandler(async (event) => {
    throw createError({
        statusCode: 400,
        message: "Test message",
        statusMessage: "Test message",
    });
};

响应内容（浏览器可见） #

{
  "url":"/api/example-api",
  "statusCode":400,
  "statusMessage":"Test message",
  "message":"Test message",
  "stack":""
}

客户端请求代码 #

// Client request
async (body: any) => {
    try {
        const response = await $fetch("/example-api", {
            method: "POST",
            body: body,
        });
    } catch (err) {
        console.log(err.message, err.statusMessage, err.statusCode);
    }
};

控制台输出 #

[POST] "/api/example-api": 400  <empty string> 400

原因分析 #

1. Nuxt 3生产环境默认隐藏错误详情：为避免泄露敏感信息，Nuxt 3在生产环境下默认不会暴露错误的message、statusMessage等详情。createError方法的public参数默认值为false，生产环境会自动隐藏此类信息。
2. $fetch错误对象映射规则：Nuxt的$fetch不会自动将响应体中的错误消息映射到err.message或err.statusMessage字段，需要手动读取响应数据。

解决方案 #

方案1：修改服务端错误配置，允许公开错误消息 #

在createError时添加public: true参数，强制生产环境返回错误详情：

// /server/api/example-api.ts
export default defineEventHandler(async (event) => {
    throw createError({
        statusCode: 400,
        message: "Test message",
        statusMessage: "Test message",
        public: true // 添加此参数，生产环境将暴露错误详情
    });
};

方案2：客户端手动解析错误响应体 #

在catch块中，通过err.data（Nuxt 3的$fetch会自动解析响应到该字段）获取错误消息：

// Client request
async (body: any) => {
    try {
        const response = await $fetch("/example-api", {
            method: "POST",
            body: body,
        });
    } catch (err: any) {
        // 直接读取解析后的错误数据
        console.log(err.data.message, err.data.statusMessage, err.statusCode);
    }
};

方案3：全局配置Nuxt错误暴露（可选） #

如果需要所有API错误都在生产环境暴露，可在nuxt.config.ts中配置Nitro的错误处理逻辑：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    errorHandler: (error, event) => {
      if (process.env.NODE_ENV === 'production') {
        return {
          statusCode: error.statusCode || 500,
          message: error.message || 'Internal Server Error',
          statusMessage: error.statusMessage || 'Internal Server Error'
        }
      }
      return error
    }
  }
})

注意事项 #

• 公开错误消息时需确保内容不包含敏感信息（如数据库路径、内部接口细节等），避免安全风险。
• Netlify部署无需额外配置，只需确保Nuxt构建产物已应用上述错误配置。

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