React+Laravel应用实现收藏列表时遇MethodNotAllowedHttpException错误

以下是针对该异常的具体排查和修复步骤：

1. 路由未纳入身份验证中间件组 #

当前/watchlist路由在auth:sanctum中间件组外，但接口需要获取登录用户信息，同时若存在同名不同方法的路由，会导致请求方法匹配失败。

修复：
将/watchlist路由移至auth:sanctum中间件组内：

Route::middleware('auth:sanctum')->group(function () {
    Route::post('/logout', [AuthController::class, 'logout']);
    Route::get('/user', function (Request $request) {
        return $request->user();
    });

    Route::apiResource('/users', UserController::class);
    // 移动到中间件组内
    Route::post('/watchlist', [WatchlistController::class, 'addMovie']);
});

2. 请求参数类型不匹配 #

前端传递的movie_ids是字符串格式（${id}），但后端验证规则要求为integer，虽然这通常返回422验证错误，但特殊情况下可能触发路由匹配异常。

修复：

• 前端传递数字类型ID：

axiosClient.post('/watchlist', { movie_ids: id, type })

• 或后端调整验证规则兼容字符串格式数字：

'movie_ids' => 'required|integer|string',

3. 路由缓存导致旧路由生效 #

Laravel生成路由缓存后，修改路由不会立即生效，请求会匹配到旧的路由配置。

修复：
执行命令清除路由缓存：

php artisan route:clear

4. axios baseURL重复添加/api前缀 #

若VITE_API_BASE_URL已包含/api（如http://localhost:8000/api），则axios配置的baseURL: ${import.meta.env.VITE_API_BASE_URL}/api``会导致请求URL变为http://localhost:8000/api/api/watchlist，触发404后可能引发MethodNotAllowed异常。

修复：
调整axios baseURL配置，避免重复前缀：

const axiosClient = axios.create({
    baseURL: import.meta.env.VITE_API_BASE_URL
})

同时前端请求路径改为/api/watchlist：

axiosClient.post('/api/watchlist', { movie_ids: id, type })

或保持请求路径不变，将VITE_API_BASE_URL设为不带/api的地址（如http://localhost:8000）。

5. 验证实际请求的URL和方法 #

在浏览器开发者工具的Network标签中，确认请求的URL是否正确、请求Method是否为POST，排除拼写错误或误发其他方法请求的情况。

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