Laravel8+Vue3使用Axios传递数组至控制器失败问题排查

我用Laravel 8和Vue.js 3开发项目，尝试通过Axios把购物车（carts）数组提交到后端控制器，但始终无法获取到这个数组。相关代码如下：

Vue.js 代码：

axios.post('/api/Order/create', {
        jsonData: JSON.stringify(this.carts)
        })
        .then(function (response) {
        console.log(response);
        })
        .catch(function (error) {
        console.log(error);
        });

Laravel 控制器代码：

public function createCmd(Request $request){

    // dd($request);
    $data = json_decode($request->input('jsonData'));
    dd( $data);

}

解决方法 #

1. 直接传递数组（推荐）

Axios默认会自动将JavaScript对象序列化为JSON，并设置Content-Type: application/json请求头，无需手动调用JSON.stringify处理数组。修改Vue代码如下：

axios.post('/api/Order/create', {
        carts: this.carts
    })
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

后端控制器可直接获取数组：

public function createCmd(Request $request){
    $data = $request->input('carts');
    // 或简化为 $request->carts
    dd($data);
}

2. 若坚持传递JSON字符串

如果一定要手动转成JSON字符串传递，可通过Laravel的$request->json()方法自动解析：

public function createCmd(Request $request){
    $data = $request->json('jsonData');
    dd($data);
}

或者保持原Vue代码，用json_decode时可添加第二个参数转为关联数组（可选）：

$data = json_decode($request->input('jsonData'), true);

3. 检查路由与请求完整性

• 确认routes/api.php中路由配置正确，指向对应控制器方法：

Route::post('/Order/create', [OrderController::class, 'createCmd']);

• 可先打印整个请求内容，验证数据是否被正确接收：

dd($request->all());

通过此方法能快速排查参数名拼写错误、数据未传递等问题。

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