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

【问题标题】：Laravel Vue Axios - Axios DELETE Request becomes GET RequestLaravel Vue Axios - Axios DELETE 请求变为 GET 请求
【发布时间】：2020-02-14 18:23:49
【问题描述】：

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

不再解释，代码会比我说明得更好：

这是我的路线：

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

这是我的主控制器：

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 消息：“成功”，但作为响应，我得到一个充满 Ignition 元素的页面，给出了错误：

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException

此路由不支持 GET 方法。支持的方法：删除。

当我在路线中将delete 更改为get 时：我收到错误消息

删除http://test.test/home/6 404（未找到）

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

这里不用说我需要认真的帮助，谢谢你的帮助！

【问题讨论】：

Delete Method in Axios, Laravel and VueJS的可能重复
@Saly3301 绝对不是：我的路线是 Route::delete('home/{home}', 'HomeController@destroy')->name('home.destroy'); 而我的 axios 删除请求是 axios.delete(${this.baseUrl}/home/6) ，我做对了其实

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

【解决方案1】：

您是否尝试过使用资源控制器？ 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

我相信因为当你改变 DELETE 请求 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 参数以获取 6 的 id。

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

或

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

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
  });

【讨论】：

很抱歉您误解了我的问题，我不是在问如何使用 axios 创建 GET 请求。我实际上是说，当我单击 ComponentComponent 上的 Button 时，它会调用 delete() 方法发出 Axios DELETE 请求，但我从该 DELETE 请求中得到的响应是上面的错误 不支持 GET 方法对于这条路线。支持的方法：DELETE。 它将我的 DELETE 请求视为 GET 请求