Laravel Vue Axios-Axios删除请求成为GET请求

问题描述 投票:0回答:1

我遇到特定错误,无法理解问题出在哪里。

没有更多的解释,代码会比我更好地说明它:

这是我的路线:

Route::get('/', 'HomeController@index')->name('home');
Route::delete('home/{home}', 'HomeController@destroy')->name('home.destroy');

这是我的homeController:

class HomeController extends Controller
{
    public function index()
    {
        return view('view');
    }

    public function destroy()
    { 
        dd('Hello World');
    }
}

这是我的视图'view.blade.php':

@extends('layouts.layout')

@section('content')
    <component></component>
@endsection

这是我的布局:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="base-url" content="{{ url('/') }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    @yield('styles')

</head>
<body>

    <div id="app">

        @yield('content')

    </div>

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}"></script>


    @yield('scripts')

</body>
</html>

这是我的bootstrap.js:

window._ = require('lodash');

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) 
{
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} 
else 
{
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

这是我的app.js:

require('./bootstrap');

window.Vue = require('vue');

Vue.prototype.baseUrl = document.head.querySelector('meta[name="base-url"]').content;
Vue.component('component', require('./components/ComponentComponent.vue').default);


const app = new Vue({
    el: '#app',
});

这是我的组件:

<template>
    <button v-on:click="delete()">BUTTON</button>
</template>

<script>
    export default {
        methods: {
            delete() 
            {

                if ( confirm('Confirm ?') ) 
                {

                    axios.delete(`${this.baseUrl}/home/6`)
                    .then( (response) =>
                    {
                        console.log('Succeeded');
                    })
                    .catch( (error) => 
                    {
                        console.log('Failed');
                    });
                }
            }
        },
        created() 
        {
            this.$nextTick( () =>
            {
            });
        }
    }
</script>

我实际上拥有的是console.log消息:“成功”,但是作为响应,我得到了一个充满点火元件的页面,并给出了错误:

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException

此路线不支持GET方法。支持的方法:放入,修补,删除。

当我在路线中将delete更改为get时:出现错误

删除http://test.test/home/6 404(未找到)

就像我真的在发送DELETE请求,但在给定时间,它在GET请求类型中发生了变化...莫名其妙...

无需在这里说我需要认真的帮助,谢谢您的帮助!

laravel vue.js get axios http-delete
1个回答
0
投票

您是否尝试过使用资源控制器?https://laravel.com/docs/5.7/controllers#resource-controllers

此外,您还应遵守REST API的规则。因此,获取请求将是:http://test.test/home?id=6删除请求为:http://test.test/home/6

因此,在axios中,当您将获取请求发送到http://test.test/home时,您想使用参数

参数:{编号:6}

但是删除请求将转到'http://test.test/home/'+ ID

© www.soinside.com 2019 - 2024. All rights reserved.