如何通过Axios从React向Node后端发送复杂嵌套对象实现数据更新

后端 Express 侧优先排查（90% 以上新手问题出在此处） #

• 确认已开启 JSON 解析中间件，且配置在所有路由定义之前：
  Express 4.16+ 版本内置 JSON 解析能力，未开启时 req.body 会默认返回空对象，嵌套参数自然无法读取：

const express = require('express')
const app = express()
// 必须放在路由定义前 全局生效
app.use(express.json())
// 如果你同时接收表单格式的嵌套数据，还需要开启 urlencoded 的 extended 配置
app.use(express.urlencoded({ extended: true }))

// 后续再写你的路由逻辑
app.put('/api/your-route', (req, res) => {
  console.log(req.body.layouts) // 此时即可正常读取嵌套对象
})

• 排查中间件冲突：不要全局挂载文件上传中间件（如 multer），这类中间件会消费请求体，导致 JSON 解析中间件无法拿到数据，仅在需要上传文件的单路由挂载即可。
• 可临时添加全局日志中间件排查请求详情，放在所有路由和其他中间件之前即可：

app.use((req, res, next) => {
  console.log('请求方法：', req.method)
  console.log('Content-Type 请求头：', req.get('Content-Type'))
  console.log('原始请求体：', req.body)
  next()
})

前端 Axios 侧配置 #

Axios 发送 POST/PUT/PATCH 请求时，默认会自动将 JS 类型的 payload 序列化为 JSON 字符串，同时自动添加 Content-Type: application/json 请求头，无需手动序列化或加头，错误的手动处理反而会导致格式异常：

正确写法示例 #

const saveBlend = async () => {
  try {
    // 直接传入原始的状态对象即可，不需要 JSON.stringify 或 Flatted 序列化
    const response = await axios.put('/api/your-route', {
      title: yourTitleState,
      layouts: yourLayoutsState // 直接传包含多断点的嵌套对象/数组
    })
    // 后续处理返回结果
  } catch (err) {
    console.error('请求失败：', err)
  }
}

特殊场景配置 #

• 如果你的 layouts 对象存在循环引用，必须用 Flatted 序列化时，前后端要配套做序列化/反序列化处理：
  前端代码：

  import Flatted from 'flatted'
  // 手动序列化时必须指定 Content-Type 头
  await axios.put('/api/your-route', Flatted.stringify({
    title: yourTitleState,
    layouts: yourLayoutsState
  }), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  

  后端代码：

  const Flatted = require('flatted')
  app.put('/api/your-route', (req, res) => {
    const data = Flatted.parse(req.body)
    console.log(data.layouts) // 拿到正常的嵌套对象
  })
  

• 可通过浏览器开发者工具「网络」面板核验请求：检查请求头的 Content-Type 是否为 application/json，请求载荷（Payload）是否为完整的嵌套 JSON 结构。

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