Laravel API对接React JS传必填字段仍报422错误

问题描述 #

开发Laravel API + React JS应用时，接口已定义必填字段admin_ref，前端请求时已传递该字段，仍持续触发422验证错误，经多轮调试、检索公开解决方案、调整参考建议后问题仍未解决。

关联业务代码 #

Laravel 端控制器代码 #

protected function searchAdmin(Request $request)
{
    $data = $request->validate([
        'admin_ref' => 'string|required'
    ]);

    $admin = adminInfos::where('adminID', $data['admin_ref'])->first();

    if (!$admin) {
        return response()->json([
            'status' => '404',
            'message' => $this->response['AccntNtFnd']
        ]);
    } else {
        return response()->json([
            'status' => '200',
            'account' => $admin
        ]);
    }
}

React 端 Axios 请求代码 #

const searchAdmin = (e) =>{
    e.preventDefault();

    axios.get(`http://127.0.0.1:8001/api/admin/adminSearch`, {
        'headers':{
            'Accept':'application/json',
            'Content-Type':'application/json',
        },
        'data':{
             'admin_ref': adminInput.searchInput
        }
    }).then(res=>{
        if(res.data.status != 200){
            console.log(res.data.message)
        }else{
            console.log(res.data.message)
        }
    }).catch(error => {
       console.log(error.response.data)
    });
  
}

问题根因 #

422是Laravel的参数验证失败错误，本质是请求到达后端时没有拿到admin_ref字段，问题出在前端Axios的GET请求传参方式错误：

• Axios 发送GET请求时，不会把data配置项里的内容作为请求体发送，data配置仅对POST、PUT、PATCH等携带请求体的请求方法生效
• 你把参数写在data里，实际发出的请求根本没有携带admin_ref字段，后端验证自然判定必填参数缺失，返回422

修复方案 #

二选一即可：

• 保留GET请求方法，把参数移到params配置项：Axios会自动把params里的内容拼接到URL查询参数中，Laravel可以正常从请求中读取到参数，修改后的请求代码如下：

const searchAdmin = (e) =>{
    e.preventDefault();

    axios.get(`http://127.0.0.1:8001/api/admin/adminSearch`, {
        headers:{
            'Accept':'application/json',
        },
        params:{
             'admin_ref': adminInput.searchInput
        }
    }).then(res=>{
        if(res.data.status != 200){
            console.log(res.data.message)
        }else{
            console.log(res.data.account)
        }
    }).catch(error => {
       console.log(error.response.data)
    });
}

注：GET请求没有请求体，不需要设置Content-Type: application/json请求头，直接删除即可。

• 把接口请求方法改为POST：如果不想把参数暴露在URL中，可以把后端路由的请求方法改成POST，前端对应改用axios.post()发请求，此时原data里的参数会被正常放在请求体中发送，后端可以正常读取。

验证方式 #

修改完成后打开浏览器开发者工具的网络面板，找到对应请求，检查请求URL/请求负载里是否存在admin_ref字段，确认字段携带后即可正常通过验证，不会再返回422错误。

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