Laravel Vue Axios - Axios DELETE Запрос становится GET Запросом - PullRequest
Новая
       36

Laravel Vue Axios - Axios DELETE Запрос становится GET Запросом

0 голосов
/ 17 октября 2019

Я получаю конкретную ошибку и не могу понять, в чем проблема.

Больше никаких объяснений, код проиллюстрирует это лучше меня:

Вот мои маршруты: 

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: «Успешно», но какв ответ я получаю страницу, полную элементов Ignition с сообщением об ошибке:

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException

Метод GET не поддерживается для этого маршрута. Поддерживаемые методы: DELETE.

Когда я изменяю delete на get в моем маршруте: я получаю ошибку

DELETE http://test.test/home/6 404 (Не найдено)

Как будто я действительно отправляю запрос DELETE, но в определенный момент он изменяется в запросе GET Тип ... Необъяснимый ...

Нет необходимостискажи, что мне нужна серьезная помощь, спасибо за помощь!

1 Ответ

0 голосов
/ 17 октября 2019

Вы пытались использовать контроллер ресурса? https://laravel.com/docs/5.7/controllers#resource-controllers

Также вы должны следовать правилам REST API. Таким образом, запрос на получение будет: http://test.test/home?id=6 Запрос на удаление будет: http://test.test/home/6

Таким образом, в axios вы хотите использовать параметры при отправке запроса на получение 

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.

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