Laravel Vue POST to api 使用 web 路由而不是 api 路由答案

【问题标题】：Laravel Vue POST to api uses web route instead of api routeLaravel Vue POST to api 使用 web 路由而不是 api 路由
【发布时间】：2021-07-06 22:38:51
【问题描述】：

我正在使用 Laravel 和 Vue.js 构建一个 MPA，并且我制作了一个发布到 api 路由的表单。当我在我的主页上时它工作，但现在我将它移动到一个子页面（http://127.0.0.1:8000/muziek），当我尝试提交它时，我不断收到The POST method is not supported for this route. Supported methods: GET, HEAD.警告，所以我认为它使用web.php-routes而不是api.php-routes。

我有这个方法可以发布到我的内部 Laravel API：

addMusicItem() {
        if (this.item.name != '') {
            axios.post('/api/record/store', {
                record: this.item
            })
            .then(response => {
                if (response.status == 201) {
                    this.item.name = "";
                }

            })
            .catch(error => {
                console.log(error);
            })
        }
    }

我的api.php-routing 是这样的：

Route::get('/records', [MusicItemController::class, 'index']);
Route::prefix('/record')->group(function(){
   Route::post('/store', [MusicItemController::class, 'store'])->name('music.store');
   Route::put('/{id}', [MusicItemController::class, 'update']);
   Route::delete('/{id}', [MusicItemController::class, 'destroy']);
});

有人知道发生了什么吗？我试图更改RouteServiceProvider，但这也不起作用。：/

【问题讨论】：

您至少可以通过检查开发工具中的网络选项卡来验证它发布到哪个路由。检查请求头以查看正在使用的路径，以便您确认它是发布到 web 还是 api 路由。
小问题，当你可以做Route::apiResource('records', MusicItemController::class);（更多信息here）时，你为什么要定义每个东西

标签： php laravel vue.js routes

【解决方案1】：

将您的路线更改为：

Route::prefix('/record')->group(function(){
   Route::post('/store', [MusicItemController::class, 'store'])->name('music.store');
   Route::put('/{id}', [MusicItemController::class, 'update']);
   Route::delete('/{id}', [MusicItemController::class, 'destroy']);
});
Route::get('/records', [MusicItemController::class, 'index']);

【讨论】：