Vue axios 向错误的 URL 发出 put 请求答案

【问题标题】：Vue axios makes put request to wrong URLVue axios 向错误的 URL 发出 put 请求
【发布时间】：2019-09-29 05:01:21
【问题描述】：

所以我遇到了一个奇怪的问题，如果我在 Vue 中通过 axios 发出 Put 请求，它会将其发送到错误的路线。

它是通过 Laravel API 资源进行的简单 CRUD 的一部分。获取和发布工作正常。

这是表格：

<form @submit.prevent="editType" method="post" class="mb-4">
            <label v-if="user.gender === 'man'" for="single_male">Enkel<input type="checkbox" name="type" :id="single_male" :value="types.single_male" v-model="checkedType" @change="showSaveButton = true"></label>
            <label v-if="user.gender === 'vrouw'" for="single_female">Enkel<input type="checkbox" name="type" :id="single_female" :value="types.single_female" v-model="checkedType" @change="showSaveButton = true"></label>
            <label v-if="user.gender === 'man'" for="double_male">Dubbel mannen<input type="checkbox" name="type" :id="double_male" :value="types.double_male" v-model="checkedType" @change="showSaveButton = true"></label>
            <label v-if="user.gender === 'vrouw'" for="double_female">Dubbel vrouwen<input type="checkbox" name="type" :id="double_female" :value="types.double_female" v-model="checkedType" @change="showSaveButton = true"></label>
            <label for="double_mix">Dubbel gemengd<input type="checkbox" name="type" :id="double_mix" :value="types.double_mix" v-model="checkedType" @change="showSaveButton"></label>
            <button type="submit" v-if="showSaveButton">Opslaan</button>
        </form>

我的更新功能：

 public function update(Request $request, $id)
    {
        $user_id = auth('api')->user()->id;

        $type = Type::where('user_id' ,'=', $user_id)->first();

        $type->single_male = $request->input('single_male');
        $type->single_female = $request->input('single_female');
        $type->double_male = $request->input('double_male');
        $type->double_female = $request->input('double_female');
        $type->double_mix = $request->input('double_mix');

        $type->save();

        return redirect()->back();
    }

我的方法：

editType() {
                let types = this.types;
                let data = {
                    single_male: this.single_male,
                    single_female: this.single_female,
                    double_male: this.double_male,
                    double_female: this.double_female,
                    double_mix: this.double_mix,
                };
                axios.put('/types/'+types.id, data)
                    .then(request => this.successfulEdit(request))
                    .catch(() => this.failed())
            },
            successfulEdit() {
                alert("Voorkeuren succesvol bijgewerkt!");
            }

还有我的路线：

    Route::apiresource('types','TypeController');

当我发出 put 请求时，我可以在开发者工具中看到它尝试向当前 url 发出请求，这当然会给出 405 method not allowed 错误。当我将 axios 请求更改为 ('/types', data) 时，它确实遵循指定的路线，但当然也会给出 405 错误，因为 put 方法需要一个 id。硬编码到例如'/types/4/' 也导致使用当前 url。

我错过了什么或有什么问题吗？提前谢谢各位！

【问题讨论】：

types.id 的值是多少？你能显示console.log('/types/'+types.id)的输出吗？
首先，感谢您的帮助！types.id 似乎返回未定义。控制台日志记录types 确实返回了正确的数据，尽管它似乎是在一个数组中传递它（而在这种情况下只有一个对象）。我认为问题出在某个地方。控制台日志记录 types[0].id 确实返回了所需的 id，但写入 axios.put('/types/'+types[0].id, data) 似乎也不起作用。即使对 url 中的 id 进行硬编码也不起作用。

标签： laravel vue.js routes resources axios

【解决方案1】：

发现问题。 return redirect()->back(); 是罪魁祸首。谢谢大家！

【讨论】：

【解决方案2】：

来自 Laravel 文档。 https://laravel.com/docs/5.8/routing

在 routes/api.php 文件中定义的路由嵌套在一个路由中由 RouteServiceProvider 分组。在该组中，/api URI 前缀是自动应用的

因此，请尝试在您当前的请求 URL 之前添加 /api，例如 axios.put('/api/types/'+types.id, data)

【讨论】：

我已经将 axios 的 baseURL 配置为 /api，所以我不必再次定义它。你当然不可能知道 ;-)