使用 Ajax 传递参数时 Laravel 405 错误

Question

我对 Laravel 很陌生，我一直在尝试使用 Ajax 将参数传递给我的控制器中的 destroy() 动作，该动作在图片数据从数据库和存储中删除时运行好吧，但是由于某种原因，它在控制台中返回 405 错误。我已经尝试过这里发布的多种解决方案，但不幸的是没有一个有效。如果我纯粹将它与 PHP 一起使用，那么 destroy() 操作可以工作，但我也在尝试学习一些 Ajax，我这样做也是因为我想这样做，就像上面有多张照片一样网站一次，每个都有自己的删除按钮，我想根据按下的删除按钮删除照片。

它在响应标头中表示只允许 GET、HEAD。

任何帮助将不胜感激，并提前感谢大家！

路线

Route::get('/photos/create/{albumId}', [PhotosController::class, 'create'])->name('photo-create');
Route::post('/photos/store', [PhotosController::class, 'store'])->name('photo-store');
Route::get('/photos/{id}', [PhotosController::class, 'show'])->name('photo-show');
Route::delete('/photos/{id}', [PhotosController::class, 'destroy'])->name('photo-destroy');

控制器

 public function destroy($id)
{
    $photo = Photo::find($id);

    if (Storage::delete('/public/albums/' . $photo->album_id . '/' . $photo->photo ))
    {
        $photo->delete();

        return redirect('/')->with('success', 'Photo deleted successfully');
    }
}

Ajax

$(document).on('click', '.deletePhoto', function(e) {

        var photo = $(this).val();

        $('#deletePhotoId').val(photo);
        $('#photoDelete').modal('show');
    });


    $(document).on('click', '.confirmDelete', function(e) {

        var photo = $('#deletePhotoId').val();

        $.ajax({

            type: "DELETE",
            url: "/photos/"+photo,
            data: {
                _token: '{{ csrf_token() }}',
            },

            /* success: function(response){
                alert(response);
            },
            error: function(response) {
                alert('Error' + response); 
            } */
        })


    });

另外，如果我在 Laravel 文档中添加了 csrf，如下所示：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

然后不管我把它放在哪里，它都会给我 419 错误。

这是错误

XHRDELETEhttp://photo-project.test/
[HTTP/1.0 405 Method Not Allowed 61ms]

    
DELETE
    http://photo-project.test/
Status405
Method Not Allowed
VersionHTTP/1.0
Transferred8.43 kB (8.19 kB size)
Referrer Policystrict-origin-when-cross-origin
        
    Allow
        GET, HEAD
    Cache-Control
        no-cache, private
    Connection
        close
    Content-Type
        application/json
    Date
        Sat, 03 Jul 2021 20:21:15 GMT
    Server
        Apache/2.4.46 (Win64) PHP/7.3.21
    X-Powered-By
        PHP/7.3.21

    Accept
        */*
    Accept-Encoding
        gzip, deflate
    Accept-Language
        en-GB,en;q=0.5
    Connection
        keep-alive
    Content-Length
        47
    Content-Type
        application/x-www-form-urlencoded; charset=UTF-8
    Cookie
        XSRF-TOKEN=eyJpdiI6IlR0bitkaitPMFhhWEdnQ1ZqL1VpTXc9PSIsInZhbHVlIjoibVREOG9JRGpOQjBqZG40QU9vWVJsS2xtT2J3OXZJK3ZjVzNzZHNKNWdQakowK1lMZ1o0RStSQWFzTVFYZ1R5cFEvNjQ2bm9ZNklYbW8xcW54ZVlzOG9sVXJXN1Z3dmU0Lys0UXRWNWZLY29Femxjb2EvS09qM0hzbm9SSndOYXIiLCJtYWMiOiI2MWJlOTc3YWFhY2NkY2VhZGM5YWZhYmE0MjcyYTc5MmRiNmQwMjU0ZmFlZmMxYzEzNTExMGU4ZjlhMTY3OTYwIn0%3D; laravel_session=eyJpdiI6IldCNU9MSHRGbnNJRlEvWDBrMmZzSmc9PSIsInZhbHVlIjoidzhoc0VFajBhZXk2dkFSa2VmNkU2UmVReVZaOFFUeGJPam1pOXI3T3gvR0FFM3crd21SODI1ZWFJZk44UThDM0VjNFdsL2V6bzNvcHk0NG9vQlpoTEtIRlNQOStxaDlvVFUvS01iOEJIUDJzODFyck11ckpZRTRzMHhVYXhHZlYiLCJtYWMiOiI5NGJmMTBlMDhlOWU0OTU4ZDkyZWRhMzlhYzIwNzFkOTAzZWI3M2RjOTEzNzI5NTYyOWFkZWIyOWMyM2E3MmM2In0%3D
    Host
        photo-project.test
    Origin
        http://photo-project.test
    Referer
        http://photo-project.test/albums/12
    User-Agent
        Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
    X-Requested-With
        XMLHttpRequest

如果您能在任何方面帮助我，再次感谢您，因为不幸的是，我有点卡在这里。

Answer 1

仔细检查您的photo JS 变量是否确实有值。如果由于某种原因它是null，那么正在构建的路由最终将成为“索引”之一，“/photos/”，当然它没有与之关联的 DELETE http 方法。

检查您的浏览器网络历史记录以确定。您会看到它试图命中的路线，还可以根据php artisan route:list 的结果再次检查。

Answer 2

public function destroy(Request $request, $id){
    $photo = Photo::find($id);
    if (Storage::delete('/public/albums/' . $photo->album_id . '/' .$photo->photo )){
        $photo->delete();
        
        //if request is via ajax 
        if($request->ajax()){
            return response()->json(['status'=>true,'message'=>'Photo Deleted Successfully']);
        }
        //otherwise redirect 
        return redirect('/')->with('success', 'Photo deleted  successfully');
    }
}

在 Ajax 方面

$(document).on('click', '.deletePhoto', function(e) {

        var photo = $(this).val();

        $('#deletePhotoId').val(photo);
        $('#photoDelete').modal('show');
    });


    $(document).on('click', '.confirmDelete', function(e) {

        var photo = $('#deletePhotoId').val();
        $.ajax({
            type: "DELETE",
            url: "/photos/"+photo,
            data: {
                _token: '{{ csrf_token() }}',
            },
            dataType:'JSON',
            cache:false,
             success: function(response){
                if(response.status){
                    console.log('Action Successfull....');
                    console.log('Response from server : ', response.message)
                }
            },
            error: function(response) {
                alert('Error' + response);
            }
        })
    });

服务器返回响应时只检查请求类型，如果是ajax则返回响应数据，否则重定向到页面。