如何从Vue向Laravel web.php路由发送带对象参数的POST请求并预览响应

前端Vue侧参数处理 #

要将对象类型的options拼入URL，需要先将其序列化为字符串格式，可选两种实现方案：

• 方案1（推荐，支持嵌套对象序列化）：使用qs库处理
  首先安装依赖：npm install qs
  调用序列化方法拼接URL：

  import qs from 'qs'
  // 你的筛选参数对象
  const options = {
    page: 1,
    pageSize: 10,
    filters: {
      status: 1,
      keyword: '测试'
    }
  }
  // 生成带参数的请求URL
  const requestUrl = `/test/debug?${qs.stringify(options)}`
  

• 方案2（无依赖原生实现）：使用JSON序列化+转义

  const options = { /* 你的筛选参数 */ }
  const requestUrl = `/test/debug?options=${encodeURIComponent(JSON.stringify(options))}`
  

Laravel侧配置 #

1. 定义web路由 #

在routes/web.php中添加调试路由，优先用GET请求方便浏览器直接访问：

use App\Http\Controllers\TestController;
Route::get('/test/debug', [TestController::class, 'debugOptions']);

2. 编写控制器逻辑 #

在app/Http/Controllers/TestController.php中添加处理方法，接收并解析参数：

• 如果用qs序列化方案，直接获取所有请求参数即可：

  public function debugOptions(\Illuminate\Http\Request $request)
  {
      // 直接获取解析完成的options结构，和前端传的对象结构完全一致
      $options = $request->all();
      // 调试打印参数，浏览器直接可见结构化输出
      dd($options);
      
      // 此处可写你的业务逻辑，最后返回响应即可直接在浏览器预览
      // return response()->json($yourBusinessData);
  }
  

• 如果用原生JSON序列化方案，需要额外做解码处理：

  public function debugOptions(\Illuminate\Http\Request $request)
  {
      $options = json_decode(urldecode($request->input('options')), true);
      dd($options);
      // 后续业务逻辑同上
  }
  

调试验证 #

前端代码中打印生成的requestUrl，复制该URL直接粘贴到浏览器地址栏访问，即可直接预览Laravel返回的所有响应内容。
如果需要测试原POST请求的返回，可在浏览器开发者工具的「网络」面板找到对应POST请求，右键选择「在新标签页打开」即可直接查看响应。

注意：URL有长度限制（多数浏览器支持2000字符以上），如果你的options参数体量极大，可临时将web路由改为同时支持POST+GET请求，调试时用浏览器REST客户端插件提交POST参数即可预览返回。

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