Laravel Vue Axios-Axios DELETE请求变为GET请求

时间:2019-10-17 19:08:22

标签: laravel vue.js get axios http-delete

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

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

这是我的路线:

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()
    { 
        ddd('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请求类型发生了变化...莫名其妙...

这里不必说我需要认真的帮助,谢谢您的帮助!

1 个答案:

答案 0 :(得分:0)

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

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

因此在axios中,当您将get请求发送到

时,您想使用参数
axios.get('/home', {
    params: {
      id: 6
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  

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

https://github.com/axios/axios

我相信,因为当您更改 将请求http://test.test/home/6删除为GET请求 Laravel正在寻找PUT,PATCH,DELETE 这就是为什么出现此错误的原因:

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException

此路由不支持GET方法。支持的方法:PUT,PATCH,DELETE。

在此处使用索引方法:

public function index()
    {
        $id = $request->input('id');
        # DO SOMETHING WITH THIS ID HERE
        return view('view')->with(['data' => 'WHATEVER YOU DID ABOVE']);
    }

您将在其中处理此id参数以获取ID为6的地方。

https://laravel.com/docs/5.7/requests#retrieving-input

OR

您可以将其添加到您的控制器中:

public function show($id)
    {

    }

,然后路由到它:

Route::get('/{id}', 'HomeController@show')->name('home');

https://laravel.com/docs/4.2/routing#route-parameters

//您是否尝试过这种删除Axios的方法?

axios({
  method: 'delete',
  url: '/home/6'
}).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });