npsb; character is causing issues in nuxt3 production server

Question

while posting a html encoded text to the server, the server side code works fine on the dev environment but when I publish it on a netlify server, the same request returns a 500 error and the server side request log middleware only detects a post request with no body.

server/api/handlePost.post.ts

export default defineEventHandler(async (event) => {
  const { rawLog } = getQuery(event);
  if (rawLog != null) {
    const myRawLog = JSON.parse(rawLog as string) as rawLogArticle;
    //post it to the server...
    return { statusCode: 200, statusMessage: "Success" };
  } else {
    return { statusCode: 500, statusMessage: "SERVER ISSUE" };
  }

pages/post/write.vue

<script setup lang="ts">
    if (body.length > 0 && _title.length > 0) {
        const { data: response } = await useFetch('/api/handlePost', {
            method: "post",
            query: {
                rawLog: JSON.stringify(newLogContent)
            }
        })
        if (response.value?.statusCode == 200) {
            await navigateTo("/")
        } else {
            console.error("something went wrong")
        }
</script>

for the post body I am using tinyMCE text editor's html content. If the post body includes any double enter or space at the end of a sentence then the server throws the 500 error. But the chrome network tab shows the request sent did contain the post body.

Manually removing the npsb; character from the request's body completes the request without any issues.

Answer 1

a pretty easy way to deal with it is to use encodeURIComponent in the server-side return