Next.js中fetch请求Payload在DevTools显示为数组的原因

可能的原因及排查方向 #

• 后端框架自动转换：不少后端框架（如Laravel、CodeIgniter）处理PUT/PATCH请求时，若请求头Content-Type非application/json，会对请求体做特殊解析，甚至包装成数组。比如你用的_method: "PUT"属于方法伪装（Method Spoofing），如果请求头是application/x-www-form-urlencoded，后端会自动整理数据格式，DevTools显示的就是框架处理后的格式。

• 请求头配置错误：你用JSON.stringify()序列化了对象，但如果没设置headers: { 'Content-Type': 'application/json' }，浏览器会默认以text/plain或application/x-www-form-urlencoded发送请求，后端解析时会出现格式转换，导致展示为数组。

• 前端拦截器修改：检查Next.js项目里的全局fetch拦截器，或是第三方请求库（如果有用）是否对请求体做了自动转换，比如把对象转成数组后再发送。

• DevTools展示逻辑：少数情况下Chrome DevTools会根据后端响应格式调整请求体展示，但这种情况概率低，更多是请求本身被修改。

验证与解决步骤 #

1. 确保fetch请求配置正确的请求头：

fetch('/your-api-endpoint', {
  method: 'POST', // 因使用_method伪装PUT，实际请求方法为POST
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    category_name: "Men's Fashion 255",
    _method: "PUT",
  })
})

2. 查看Network面板的Request Payload（而非Response），确认原始发送内容是否正确。若原始Payload是你定义的对象，问题出在后端解析或展示；若原始Payload已是数组，说明前端请求被修改。

3. 用Postman或curl发送相同请求，对比结果，快速定位是前端还是后端问题。

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