Nuxt3部署Netlify后提交含npsb的HTML文本出现500错误

问题描述 #

本地开发时提交HTML编码内容到服务器一切正常，但部署到Netlify后，相同请求直接返回500错误。服务器端日志只能检测到POST请求到达，却拿不到请求体。进一步测试发现：当tinyMCE编辑器的内容包含换行（双击回车）或句末空格时必触发错误，Chrome网络面板明明显示请求带了数据，但手动移除内容里的 这类字符后，请求又能正常完成。

核心原因 #

看你贴的代码就发现问题了：前端把JSON序列化后的HTML内容放到了**POST请求的URL查询参数（query）**里，而不是请求体中。

• 查询参数有长度限制，Netlify服务器对这部分的校验比本地开发环境严格，一旦内容过长或包含特殊转义字符（比如换行、 转义后的编码），就会导致参数被截断或解析失败。
• 后端代码里用getQuery(event)拿参数，一旦解析失败拿不到rawLog，就会直接返回500错误。

修复方案 #

1. 前端修改：把数据放到POST请求体中 #

修改pages/post/write.vue里的useFetch配置，放弃用query传参，改用body，同时设置正确的请求头：

<script setup lang="ts">
if (body.length > 0 && _title.length > 0) {
    const { data: response } = await useFetch('/api/handlePost', {
        method: "post",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ rawLog: newLogContent })
    })
    if (response.value?.statusCode == 200) {
        await navigateTo("/")
    } else {
        console.error("提交失败")
    }
}
</script>

2. 后端修改：读取请求体而非查询参数 #

修改server/api/handlePost.post.ts，用readBody替代getQuery来获取请求数据：

export default defineEventHandler(async (event) => {
  const { rawLog } = await readBody(event);
  if (rawLog != null) {
    // 这里不需要再JSON.parse，因为rawLog已经是解析后的对象了
    // post it to the server...
    return { statusCode: 200, statusMessage: "Success" };
  } else {
    return { statusCode: 500, statusMessage: "SERVER ISSUE" };
  }
})

额外注意事项 #

• 如果你需要保留原始的HTML字符串（比如包含 这类实体），前端序列化时不要额外处理，直接传字符串即可，后端拿到后按需处理。
• 测试时可以在后端加日志打印rawLog的值，确认数据是否正常接收。

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