VueJS发送FormData POST请求返回空响应问题排查

我之前也踩过这个FormData请求的坑，你的问题主要出在手动设置了multipart/form-data请求头，再加上可能没处理Laravel的CSRF验证，导致后端没法正确解析请求数据，所以返回空响应。下面一步步给你解决：

问题根源 #

当你使用FormData作为请求体时，浏览器会自动生成正确的Content-Type头，里面会包含表单边界（boundary）信息，比如：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

而你手动设置的Content-type: multipart/form-data没有带这个边界，Laravel的请求解析器没法识别表单数据，自然就返回空了。

修正后的前端代码 #

把手动设置的Content-type头删掉，同时记得加上Laravel要求的CSRF令牌（不然会被CSRF拦截，返回419错误）：

let data = new FormData()
data.append('name', 'hey')
// 从页面meta标签获取CSRF令牌，Laravel默认会生成这个标签
const csrfToken = document.querySelector('meta[name="csrf-token"]').content

fetch('http://homestead.test/api/customers', {
  method: 'POST',
  headers: {
    // 移除手动设置的Content-type，让浏览器自动处理
    'X-CSRF-TOKEN': csrfToken
  },
  body: data
})
.then((response) => response.json())
.then((response) => {
  console.log(response)
})

后端Laravel代码确认 #

确保你的CustomerController的store方法正确获取请求数据，比如：

public function store(Request $request)
{
    // 先打印所有请求数据确认是否正常接收
    return response()->json($request->all());
    // 或者单独获取name字段返回
    // return response()->json(['name' => $request->input('name')]);
}

额外检查点 #

• 确认Route::resource('customers', 'CustomerController')确实生成了POST类型的/api/customers路由（可以通过php artisan route:list命令查看）
• 如果是纯API场景，检查app/Http/Kernel.php里的api中间件组是否移除了CSRF中间件；如果是从前端页面发请求，还是需要带上CSRF令牌。

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