NuxtJS中Cloudinary模块报错：Cannot Convert Undefined or Null to Object

问题原因 #

• 你自定义挂载的中间件路由没有配置请求体解析规则，Nuxt 内置的 body-parser 解析中间件默认只会对官方约定的接口路径（比如 pages/api、server/api 下的路由）生效，你手动注册的 /api/cloudinary/signature 路由不在默认解析范围内，导致 req.body 为 undefined，传入 Object.keys() 时触发类型转换报错。
• 你最开始的代码里 console.log(payload) 在 Object.keys 执行逻辑之后，所以报错直接触发 catch 逻辑，不会走到你写的打印代码段。

解决方法 #

Nuxt 2 版本适配方案 #

如果未内置 body-parser 先执行安装：npm i body-parser
修改 modules/cloudinary/index.js 代码如下：

import bodyParser from 'body-parser'

export default function () {

  this.nuxt.hook('render:setupMiddleware', (app) => {
    // 给当前路由添加请求体解析规则，同时支持json和表单格式请求
    app.use('/api/cloudinary/signature', bodyParser.json())
    app.use('/api/cloudinary/signature', bodyParser.urlencoded({ extended: true }))
    app.use('/api/cloudinary/signature', setSignature)
  })

  function setSignature(req, res) {
    try {
      const payload = []
      // 增加兜底判断，避免body为空时的报错
      if (req.body) {
        Object.keys(req.body).forEach((key) => {
          payload.push(`${key}=${req.body[key]}`)
        })
      }

      console.log(payload)
      // 补充正常响应逻辑，避免请求挂起
      res.end(JSON.stringify({ payload }))

    } catch (error) {
      console.error('error in cloudinary module', error)
      res.statusCode = 500
      res.end(JSON.stringify({ error: error.message }))
    }
  }
}

Nuxt 3 版本适配方案 #

Nuxt 3 基于 h3 框架，不能直接读取 req.body，需要用内置的 readBody 方法异步读取：

export default defineEventHandler(async (event) => {
  try {
    const body = await readBody(event)
    const payload = []
    if (body) {
      Object.keys(body).forEach((key) => {
        payload.push(`${key}=${body[key]}`)
      })
    }
    return { payload }
  } catch (error) {
    console.error('error in cloudinary module', error)
    throw createError({ statusCode: 500, message: error.message })
  }
})

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