Laravel8路由提示不支持GET方法搭配ConfirmBox删除功能问题排查

The GET method is not supported for this route. Supported methods: POST.

问题1：a标签默认跳转行为未被完全阻止 #

你用<a>标签作为删除按钮，默认点击就会发起GET请求跳转到href地址。你写的JS是监听confirm事件，但大概率是你的bootstrap-confirmation插件触发逻辑有问题，或者你没有先阻止a标签的默认点击事件，导致还没等AJAX的DELETE请求发出去，浏览器已经先发起了GET请求访问该路由，就抛出了方法不支持的错误。

修复方案 #

优先推荐把a标签换成button按钮，手动存地址到data属性里，从根源避免默认跳转问题：

<button type="button" data-url="{{ route('operDel',$data->id) }}" class="btn btn-danger btn-sm"
     data-tr="tr_{{$data->id}}"
     data-id="{{$data->id}}"
     data-toggle="confirmation"
     data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-remove"
     data-btn-ok-class="btn btn-sm btn-danger"
     data-btn-cancel-label="Cancel"
     data-btn-cancel-icon="fa fa-chevron-circle-left"
     data-btn-cancel-class="btn btn-sm btn-default"
     data-title="Are you sure you want to delete ?"
     data-placement="left" data-singleton="true">Delete</button>

对应的JS里取地址的逻辑对应修改即可：

$(document).on('confirm', function (e) {
    var ele = e.target;
    e.preventDefault();

    $.ajax({
        url: $(ele).data('url'),
        type: 'DELETE',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success: function (data) {
            if (data['success']) {
                $("#" + data['tr']).slideUp("slow");
                alert(data['success']);
            } else if (data['error']) {
                alert(data['error']);
            } else {
                alert('Whoops Something went wrong!!');
            }
        },
        error: function (data) {
            alert(data.responseText);
        }
    });
    return false;
});

如果要保留a标签，额外加一段点击事件先阻止默认跳转即可：

$('a[data-toggle=confirmation]').on('click', function(e){
    e.preventDefault();
});

问题2：控制器代码语法错误 #

你控制器里的删除逻辑多写了一个$符号，$$id是PHP的可变变量写法，这里你要取的是参数传进来的$id，修正后代码如下：

public function destroy($id)
{
    Kvit::where('id', $id)->delete();
    return response()->json([
        'success'=>"Product Deleted successfully.", 'tr'=>'tr_'.$id
    ]);
}

其他需要确认的配置项 #

• 确认blade模板头部已经添加了csrf的meta标签，否则AJAX请求会报419权限错误：

<meta name="csrf-token" content="{{ csrf_token() }}">

• 确认已经正确引入了bootstrap-confirmation插件的JS文件，否则confirm事件根本不会触发，会直接走a标签默认跳转逻辑。

内容的提问来源于stack exchange，提问作者Hayrulla Melibayev