Netlify函数event.body返回'[object Object]'无法读取请求体问题

问题核心原因 #

• HTTP GET 方法按规范不支持携带请求体，Netlify Functions 底层的事件解析逻辑不会对GET请求携带的body做正确序列化，会直接将对象强制转换为字符串[object Object]赋值给event.body，这是拿到异常值的根本原因。
• 之前尝试JSON.parse/JSON.stringify无效，是因为请求到达函数处理逻辑前，原始的JSON请求体就已经被异常转换，后续任何序列化/反序列化操作都无法恢复原始数据。
• 现有netlify.toml中的函数目录配置使用了绝对路径写法，本地开发时存在无法正确识别函数目录的隐患。

修复方案 #

• 修改前端请求方法，将GET替换为POST（或PUT/PATCH等规范允许携带请求体的方法），GET请求仅用于无请求体的资源查询场景，不要携带body。
  修正后的前端请求代码：

  async function clicked () {
    const response =  await fetch(`http://localhost:8888/.netlify/functions/hello`, {
      method: 'POST',
      headers: {
        "Content-Type":"application/json",
      },
      body: JSON.stringify({message:'hello'})
    })
  }
  

• 在Netlify函数中对event.body做JSON解析，默认情况下函数接收到的event.body是序列化后的JSON字符串，不是直接可用的JS对象，建议加异常捕获避免非法JSON导致函数报错。
  修正后的函数处理代码：

  exports.handler = async (event, context) =>  {
    let requestBody = {}
    try {
      requestBody = JSON.parse(event.body)
    } catch (err) {
      return {
        statusCode: 400,
        body: JSON.stringify({ msg: 'invalid request body' })
      }
    }
    console.log(requestBody) // 此处可正常拿到 {message:'hello'}
    return {
      statusCode: 200,
      body: JSON.stringify({ code: 0 })
    }
  }
  

• 修正netlify.toml的函数目录配置，去掉路径开头的斜杠，使用相对路径指向项目内的函数目录：

  [build]
  functions = "functions"
  

注意：哪怕部分HTTP客户端允许给GET请求挂载body，经过CDN、反向代理、Serverless运行时的层层转发后，请求体大概率会被丢弃或异常序列化，属于违反HTTP规范的写法，会直接引入不可预期的兼容性问题，所有带请求体的请求都应该使用POST/PUT/PATCH等方法。

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