Webiny API（Fastify）请求体在CloudWatch中仅显示[object Object]问题排查

确实是navigator.sendBeacon的发送方式导致的问题，核心原因是它处理请求体的逻辑和你预期的不一致：

问题根源 #

• 当直接给sendBeacon传入普通JavaScript对象时，它不会自动序列化为JSON，而是会将对象转换为FormData格式发送，请求的Content-Type为multipart/form-data。
• Fastify（Webiny API默认基于Fastify）默认只解析application/json、application/x-www-form-urlencoded这类格式的请求体，没有内置解析multipart/form-data的能力。这就导致Fastify无法正确解析请求体，最终request.body是一个无法正常序列化的内部对象，直接打印就会输出[object Object]，即使调用JSON.stringify也可能得到空对象或无意义内容。

解决方案 #

方案1：修改前端发送格式为JSON #

将对象序列化为JSON字符串，包装成Blob并指定正确的Content-Type，让Fastify能默认解析：

function logData(payload: any) {
  const jsonBlob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
  return navigator.sendBeacon('https://example.com/test', jsonBlob);
}

修改后，Fastify会正确解析请求体为JavaScript对象，此时使用JSON.stringify(request.body, null, 2)就能在CloudWatch中看到格式化的JSON日志。

方案2：在Fastify中配置FormData解析插件 #

如果需要保留FormData的发送格式，需在Webiny API的Fastify实例中安装并配置@fastify/multipart插件：

1. 安装插件：

npm install @fastify/multipart

2. 在Fastify配置中注册插件：

import fastifyMultipart from '@fastify/multipart';

// 假设这是你的Webiny API Fastify实例初始化代码
fastify.register(fastifyMultipart, {
  limits: {
    fileSize: 1024 * 1024 // 根据需求调整限制
  }
});

3. 解析并打印FormData：

// 在路由处理函数中
async function testRoute(request, reply) {
  const data = await request.file(); // 如果是单字段，或使用request.parseMultipart()处理多字段
  console.log(JSON.stringify(data.fields)); // 打印表单字段内容
}

验证建议 #

可以先在Fastify路由中打印请求的Content-Type，确认当前发送的格式：

console.log(request.headers['content-type']);

如果输出包含multipart/form-data，就验证了上述问题根源。

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