如何在Nuxt 3的index.vue中捕获传入POST请求及请求体？

完全可以在Nuxt 3的index.vue页面中捕获POST请求的请求体，核心是利用Nuxt的服务器端能力解析请求数据——请求体解析只能在服务端完成，直接操作原生IncomingMessage需要手动处理数据流，而Nuxt提供了更便捷的封装工具。

具体实现步骤 #

1. 在页面服务端逻辑中解析请求体
   在index.vue的setup函数中，通过process.server确保代码仅在服务端执行，结合useRequestEvent和Nuxt内置的readBody函数读取请求体：

<script setup>
if (process.server) {
  const event = useRequestEvent()
  // 判断当前请求是否为POST方法
  if (event?.req.method === 'POST') {
    // 读取并解析POST请求体（自动兼容JSON、表单等格式）
    const postBody = await readBody(event)
    // 可对请求体做自定义处理，比如打印、存储到状态中
    console.log('捕获到POST请求体:', postBody)
    // 若需在客户端展示数据，用useState同步服务端数据到客户端
    const receivedPostData = useState('receivedPostData', () => postBody)
  }
}
</script>

<template>
  <div>
    <h1>首页</h1>
    <div v-if="receivedPostData">
      收到的POST数据：{{ receivedPostData }}
    </div>
  </div>
</template>

2. 关键说明

• readBody是Nuxt封装的工具函数，自动处理请求体的解析流程，无需手动监听原生IncomingMessage的data/end事件拼接数据——这也是你之前直接用IncomingMessage取不到请求体的原因，原生对象需要手动处理数据流，而Nuxt已经完成了封装。
• 必须用process.server包裹相关逻辑，客户端环境不存在请求对象，直接调用会报错。
• 使用useState可以将服务端捕获的请求体数据同步到客户端，确保页面渲染时能正常展示这些数据。

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