Q&ALaravel5.4でデータベーステーブルからレコードをajax通信で削除したいのですが、以下のエラーが返ってきてしまいます。
DELETE http://192.168.33.10/staff/4/edit 405 (Method Not Allowed)
onDeleteButtonClick @ d2d.js:75
削除ボタンがクリックされると、JSコード内で"http://192.168.33.10/staff/4"に対して、DELETEのリクエストを送っているつもりなのですが、ChromeのDeveloperツールでHeaders情報を確認すると、どうもリクエスト先が"http://192.168.33.10/staff/4/edit"になっているようです。
たぶんこれが原因なのかなとは思っているのですが、どのように直せば良いかわからず、長い時間、ハマってしまっております！
原因、解決策をご存知の方がおりましたら、ご教授くださいませ！
よろしくお願いいたします！
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']); } }
追記
request.setRequestHeader('XSRF-TOKEN', token); //request.setRequestHeader('X-CSRF-TOKEN', token); request.send('id=' + encodeURIComponent(id)); // request.send('id=' + encodeURIComponent(id) + '&' + '_token=' + encodeURIComponent(token));
ヘッダーでCSRF TOKENを送信するように変更したら、リクエスト先が目的の"http://192.168.33.10/staff/4"になりました。
ただ、今度は今度は500エラーが返ってくるようになりました。。。
回答2件
0
ベストアンサー
かなり長い時間ハマりましたが、StaffControllerのdestroyメソッドにDIしてるFormRequestを継承したクラス内で定義してるバリデーションルールの設定が原因でした。
投稿2017/05/08 02:04
退会済みユーザー
総合スコア0
0
大抵のブラウザはDELETEリクエストを発行出来無いので、代わりにフォームの要素にdeleteを入れて代わりとしている感じかと思いますが、
普通のDELETEリクエスト時の要素を見るとそれらしいものがあったりしませんか？
投稿2017/05/07 12:56
総合スコア1305
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。