Nuxt3从3.2.0升级到3.4.3后API调用出现类型错误求助

问题描述 #

将Nuxt.js应用从3.2.0版本升级到3.4.3版本后，客户端调用服务端API（该API会调用后端服务器）时，出现未捕获异常：

[nitro] [dev] [uncaughtException] TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of Response

服务端API代码 #

export default defineEventHandler(async (event) => {
    const {BACKEND_REST_API, ENQUIRY_TOKEN, ENQUIRY_PERSON_IN_CHARGE_EMAIL, COMPANY_UNID, ENQUIRY_TITLE, ENQUIRY_TYPE, ENQUIRY_SOURCE, } = useRuntimeConfig();
    const form = await readBody(event);
    console.log("url used for enquiry rest call :" + BACKEND_REST_API);
    console.log("Enquiry token :" + ENQUIRY_TOKEN);

    form.author = ENQUIRY_TITLE
    form.personInChargeEmail = ENQUIRY_PERSON_IN_CHARGE_EMAIL;
    form.contactPersonCompany = 'N/A';
    form.companyUnid = COMPANY_UNID;
    form.type = ENQUIRY_TYPE;
    form.source = ENQUIRY_SOURCE;
    delete form.bot;

    console.log(form);
    return await $fetch.raw(BACKEND_REST_API+"/enquiry/add", {
        method: "POST",
        body: form,
        headers: {
            Authorization: ENQUIRY_TOKEN,
        },
    })
})

客户端调用代码 #

await useFetch("/api/enquiry", {
        method: "POST",
        body: values,
        onResponse({request, response, options}) {
            // Process the response data
            if (response.status === 200) {
                errorMessage.value = "";
                successMessage.value = "Your message was sent successfully and will receive further emails from us soon. Thank you!";
            }
        },
        onResponseError({request, response, options}) {
            console.debug(response);
            if (response.status === 400) {
                successMessage.value = "";
                errorMessage.value = "There may be an issue with our server. Please try again later, or send an email to info@loftoffices.ae";
            } else {
                successMessage.value = "";
                errorMessage.value = "Sorry we couldn’t send the message, there may be an issue with our server. Please try again later, or send an email to ........"
            }
        },
    });

解决方案 #

问题出在服务端API中使用$fetch.raw()直接返回了完整的Response对象。Nuxt 3.4.x版本的Nitro服务器在处理API响应时，无法将原生Response对象直接序列化为可传输的响应内容，因此抛出类型错误。

修改方案1：直接使用$fetch获取响应数据 #

如果只需要后端返回的数据，替换$fetch.raw()为$fetch即可，它会自动解析响应体并返回数据：

return await $fetch(BACKEND_REST_API+"/enquiry/add", {
    method: "POST",
    body: form,
    headers: {
        Authorization: ENQUIRY_TOKEN,
    },
})

修改方案2：提取$fetch.raw()中的必要信息返回 #

如果需要保留响应状态码、头信息等额外内容，从$fetch.raw()返回的对象中提取需要的部分：

const rawResponse = await $fetch.raw(BACKEND_REST_API+"/enquiry/add", {
    method: "POST",
    body: form,
    headers: {
        Authorization: ENQUIRY_TOKEN,
    },
})

// 返回可序列化的数据结构
return {
    data: rawResponse._data,
    status: rawResponse.status,
    statusText: rawResponse.statusText,
    headers: Object.fromEntries(rawResponse.headers.entries())
}

说明 #

$fetch.raw()返回的是包含原生Response对象的包装实例，而Nuxt服务器期望API返回值是可JSON序列化的类型（如对象、数组、字符串等）。直接返回Response对象会导致Nitro在处理响应流时无法识别类型，从而触发错误。

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