Vue+Laravel项目更新产品时路由不支持PUT方法如何解决

首先请先打开浏览器开发者工具的「Network」面板，查看提交请求的实际请求地址、请求方法、响应状态码，确认基础请求信息是否符合预期。

1. API路由前缀缺失 #

Laravel中定义在routes/api.php文件中的路由，默认会自动添加/api前缀，你当前前端请求的相对路径是edit，会自动拼接当前页面的路径作为前缀，大概率没有匹配到你定义的API路由。

修复方案： #

把前端请求地址补全前缀：

axios.post('/api/edit', data)

如果你的路由是定义在routes/web.php中，不需要加/api前缀，但要确保请求路径和路由定义完全一致，避免相对路径拼接错误，可以改为绝对路径：

axios.post('/edit', data)

2. API路由组未开启方法参数覆盖支持 #

Laravel的_method方法欺骗功能，默认只在web中间件组中生效，api中间件组默认没有加载对应的中间件，所以即使你传了_method=PUT，框架也不会把POST请求识别为PUT请求。

修复方案二选一： #

• 方案1：直接用axios发PUT请求，不需要传_method参数：

submitForm(){
    axios.put('/api/edit', {
        id: this.product.id,
        name: this.product.name,
        description: this.product.description
    })
    .then( (response) => {
        console.log("success");
    })
}

如果需要上传文件必须用FormData的话，直接给axios指定X-HTTP-Method-Override请求头即可：

axios.post('/api/edit', data, {
    headers: {
        'X-HTTP-Method-Override': 'PUT'
    }
})

• 方案2：给API路由组添加方法覆盖中间件，在app/Http/Kernel.php的$middlewareGroups['api']数组中添加：

\Illuminate\Foundation\Http\Middleware\MethodParameterOverride::class,

3. 路由缓存未更新 #

如果你的项目开启了路由缓存，修改路由配置后没有清理缓存会导致新路由不生效。

修复方案： #

在项目根目录执行命令清理路由缓存：

php artisan route:clear

4. 路由匹配顺序问题 #

如果在你定义的Route::put('/edit')之前有其他模糊匹配的路由（比如带参数的路由Route::get('/{product}'），框架会优先匹配前面的路由，导致后续的PUT路由不生效。

修复方案： #

把精确匹配的路由放到模糊匹配路由的前面。

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