I get 405 (Method Not Allowed) error on a DELETE Ajax Request in Laravel5.4

Question

I'm new to Laravel.

I'd like to delete a record from a database table by ajax call, but I get this error below.

DELETE http://192.168.33.10/staff/4/edit 405 (Method Not Allowed) onDeleteButtonClick @ d2d.js:75

I'm sending a ajax request to " http://192.168.33.10/staff/4 " in my JavaScript code, but it seems that the request is sent to " http://192.168.33.10/staff/4/edit ".

How can I make my ajax request to " http://192.168.33.10/staff/4 "?

HTML Form on http://192.168.33.10/staff/4/edit

<form method="post" action="http://192.168.33.10/staff/{{  $staff->id  }}">

    <div class="form-group row">
        <div class="col-6">
            <label for="">last name</label>
            <input type="text" class="form-control" id="" name="last_name" placeholder="" value="{{  $staff->last_name }}">
        </div>

        <div class="col-6">
            <label for="">first name</label>
            <input type="text" class="form-control" id="" name="first_name" placeholder="" value="{{  $staff->first_name }}">
        </div>

    </div>

    <button type="submit" class="btn btn-primary">update</button>
    {{ method_field('PUT') }}


    <button id="delete-button" type="button" class="btn btn-danger">delete</button>

    <input id="hidden-value" type="hidden" name="id" value="{{  $staff->id  }}"/>
    {{ csrf_field() }}


</form>

JavaScript

var $deleteButton = document.getElementById("delete-button");

$deleteButton.addEventListener("click", onDeleteButtonClick);

function onDeleteButtonClick(event) {


    var request = new XMLHttpRequest();

    request.ontimeout = function(event){
        console.log("timeout error");
    };

    request.onreadystatechange = function() {


        if(request.readyState === 4) {

            console.log("done");

            if(request.state === 0) {

                console.log("fail");

            } else {

                if(request.status === 200) {

                    console.log("request success");
                    location.href = "http://192.168.33.10/staff";

                } else {

                    console.log("request fail");



                }

            }

        }

    };

    request.onload = function(event) {
        console.log("onload");
        console.log(request.response);

    };

    request.onerror = function(event) {
        console.log("onerror");
        console.log(request.response);

        console.log(request.responseText);

    };

    var id = document.getElementsByName("id")[0].value;
    var token = document.getElementsByName("_token")[0].value;

    var url = "http://192.168.33.10/staff/" + id;


    request.open("DELETE", url, true);

    request.responseType = "json";
    request.timeout = 2000;

    request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');

    request.send('id=' + encodeURIComponent(id) + '&' + '_token=' + encodeURIComponent(token));

}

Headers Information

GENERAL:

Request URL:http://192.168.33.10/staff/4/edit
Request Method:DELETE
Status Code:405 Method Not Allowed
Remote Address:192.168.33.10:80
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source

RESPONSE HEADERS:

allow:GET, HEAD
Cache-Control:no-cache, private
Connection:close
Content-Type:text/html; charset=UTF-8
Date:Sun, 07 May 2017 11:17:09 GMT
Server:Apache/2.4.6 (CentOS) PHP/7.0.18
X-Powered-By:PHP/7.0.18
Request Headers
view source

REQUEST HEADERS:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:52
content-type:application/x-www-form-urlencoded;charset=UTF-8
Cookie:XSRF-TOKEN=eyJpdiI6ImViWGdkU3RCdkxORk9aV3RpMnNmTkE9PSIsInZhbHVlIjoidGRaT1wvdEpadlVFV1djcE05anhraktKY041ZmZ5VWpISGpjTzBmVk1HXC80ODNjOGNtY05Hc3RDSWw4dHM1M2h4eVRkMEJqVnUzR3FjMzhTMzE2YTlGZz09IiwibWFjIjoiYTNlYjc4MGNhYzkyOWQxMzhkMWNjYWNlNjIyNzNiOGU5M2M4OTE3ZjA0YzE1MmY3NjY4MjdkZTU0YWY5OTE3NSJ9; laravel_session=eyJpdiI6IkpyaWRwVit2NE03NURRSG03NlhCU0E9PSIsInZhbHVlIjoiODBIMGVyYkV6bHhEQzlWZXZIVTRoVFwvT0RnNTJweXBqNG14dnBzYWN4bXFJT3lKcTdTb1FsMUJqejFucE5wdThKNkhQWkY2aDdZWFMwbUhLM2RxaE5nPT0iLCJtYWMiOiI0YTQyN2I1ZjA3NjFhNzY0NWM1ZDRlMzVlOTZiNTI2OTc5M2M2NmMzNmNkNDA2ZWY4Nzc0NjlmYzBmZTgzNGE1In0%3D
Host:192.168.33.10
Origin:http://192.168.33.10
Referer:http://192.168.33.10/staff/4/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
Form Data
view source
view URL encoded
id:4
_token:zQEHxnSdNlIB63wQ4lzxbHYO6wq5YMEhqddky46L

Route Definitions

[vagrant@localhost door]$ php artisan route:list
+--------+-----------+------------------------------+----------------------+---------------------------------------------------------------+--------------+
| Domain | Method    | URI                          | Name                 | Action                                                        | Middleware   |
+--------+-----------+------------------------------+----------------------+---------------------------------------------------------------+--------------+
|        | GET|HEAD  | /                            |                      | Closure                                                       | web          |
|        | GET|HEAD  | _debugbar/assets/javascript  | debugbar.assets.js   | Barryvdh\Debugbar\Controllers\AssetController@js              |              |
|        | GET|HEAD  | _debugbar/assets/stylesheets | debugbar.assets.css  | Barryvdh\Debugbar\Controllers\AssetController@css             |              |
|        | GET|HEAD  | _debugbar/clockwork/{id}     | debugbar.clockwork   | Barryvdh\Debugbar\Controllers\OpenHandlerController@clockwork |              |
|        | GET|HEAD  | _debugbar/open               | debugbar.openhandler | Barryvdh\Debugbar\Controllers\OpenHandlerController@handle    |              |
|        | GET|HEAD  | api/user                     |                      | Closure                                                       | api,auth:api |
|        | GET|HEAD  | staff                        | staff.index          | App\Http\Controllers\StaffController@index                    | web          |
|        | POST      | staff                        | staff.store          | App\Http\Controllers\StaffController@store                    | web          |
|        | GET|HEAD  | staff/create                 | staff.create         | App\Http\Controllers\StaffController@create                   | web          |
|        | GET|HEAD  | staff/{staff}                | staff.show           | App\Http\Controllers\StaffController@show                     | web          |
|        | PUT|PATCH | staff/{staff}                | staff.update         | App\Http\Controllers\StaffController@update                   | web          |
|  >>>   | DELETE    | staff/{staff}                | staff.destroy        | App\Http\Controllers\StaffController@destroy                  | web          |
|        | GET|HEAD  | staff/{staff}/edit           | staff.edit           | App\Http\Controllers\StaffController@edit                     | web          |
+--------+-----------+------------------------------+----------------------+---------------------------------------------------------------+--------------+

StaffController

class StaffController extends Controller
{

    //other methods here...

    //delete
    public function destroy($id, StaffRequest $request) {

        $staff = Staff::findOrFail($id);
        $staff->delete();

        return response()->json(['apple' => 'red', 'peach' => 'pink']);

    }


}

UPDATE

request.setRequestHeader('XSRF-TOKEN', token);
//request.setRequestHeader('X-CSRF-TOKEN', token);
request.send('id=' + encodeURIComponent(id));
// request.send('id=' + encodeURIComponent(id) + '&' + '_token=' + encodeURIComponent(token));

I changed two lines in my JavaScript code like the above, so that now I'm throwing a DELETE request to " http://192.168.33.10/staff/4 ".

However I get 500 error instead of 405 error.

Answer 1

删除链接DELETE http://192.168.33.10/staff/4/edit中的edit参数为DELETE http://192.168.33.10/staff/4