Question

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

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

这是我的路线：

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

这里不必说我需要认真的帮助，谢谢您的帮助！

Answer 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

我相信，因为当您更改将请求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
  });

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

1 个答案: