React+Laravel提交表单数据至Controller失败问题排查

以下是针对你遇到的问题的具体排查方向，按优先级排序：

• 检查请求头与数据格式
  打开浏览器开发者工具的Network面板，找到你发送的update请求：

  1. 查看Request Headers里的Content-Type：如果是JSON格式，必须设为application/json；如果是表单格式，需对应application/x-www-form-urlencoded或multipart/form-data。
  2. 查看Request Payload（JSON格式）或Form Data（表单格式），确认数据确实被正确组装并发送。如果这里为空，问题出在前端数据处理环节。

• 验证后端路由配置
  确认update路由使用了正确的HTTP方法（PUT/PATCH），Laravel资源路由默认update方法为PUT/PATCH。打开routes/api.php或web.php检查路由定义：

  // 资源路由示例
  Route::resource('products', ProductController::class);
  // 或单独定义路由
  Route::put('/products/{product}', [ProductController::class, 'update']);
  

  确保前端请求方法与路由配置一致，避免因方法不匹配导致数据无法被正确接收。

• CSRF令牌验证（针对web路由）
  如果路由在web.php中，Laravel会强制校验CSRF令牌，需在请求头中携带令牌：

  • Axios写法：

    axios.put(`/products/${productId}`, formData, {
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
      }
    })
    

  • Fetch写法：

    fetch(`/products/${productId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
      },
      body: JSON.stringify(formData)
    })
    

  若为api路由，检查config/cors.php中的allowed_origins、allowed_methods配置，确保前端域名在允许列表内。

• 查看后端原始请求内容
  在ProductController的update方法中，暂时替换dd($request->all())为：

  dd($request->getContent());
  

  如果输出为空字符串，说明后端未接收到任何数据，问题出在请求传输环节；如果输出为JSON字符串，说明Laravel未正确解析为数组，大概率是Content-Type请求头设置错误。

• 用测试工具直接请求后端
  使用Postman或curl发送测试请求到update接口，例如：

  curl -X PUT http://你的域名/api/products/1 \
    -H "Content-Type: application/json" \
    -H "X-CSRF-TOKEN: 你的CSRF令牌" \
    -d '{"name": "测试商品", "price": 99}'
  

  如果后端能正常获取数据，说明问题在前端代码；若仍无法获取，排查后端自定义中间件或服务器配置是否拦截了请求。

• 检查模型$fillable（后续保存用）
  虽然当前问题是无法获取请求数据，但后续保存数据时，需确保Product模型的$fillable属性包含要更新的字段：

  class Product extends Model
  {
    protected $fillable = ['name', 'price', 'description']; // 列出允许批量赋值的字段
  }
  

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