2017-01-16 20 views
1

MySQLデータベースから項目をアキシャルでIDで削除しようとしています。私のVueのコンポーネントでは、私は項目を削除処理するように設定、次の方法があります:私は次のメソッドを持っている私のTodoControllerデータベースからの削除状態コード405のエラーで要求が失敗しました

<li v-for="(todo, index) in todos"> 
    <span>{{todo.todo}} <button @click="deleteTodo(todo.id, index)">delete</button></span> 
</li> 

deleteTodo(id, index){ 
     axios.delete('api/todos/' + id).then(function(response){ 
      console.log(response) 
      this.todos.slice(index, 1) 
     }.bind(this)).catch((err) => { 
       console.log(err) 
     })  
} 

を私はそうのように私のテンプレートでdeleteTodoを呼び出しています:私はアイテムを削除しようとすると

public function remove($id) 
{ 
    DB::table('todos')->where('id', $id)->delete(); 
    return redirect('todos'); 
} 

、私は、コンソールで次のエラーを取得する:

Error: Request failed with status code 405 
Stack trace: 
[email protected]://localhost:8000/js/app.js line 107 > eval:15:15 
[email protected]://localhost:8000/js/app.js line 193 > eval:18:12 
[email protected]://localhost:8000/js/app.js line 86 > eval:77:7 

ブラウザを更新すると、実際にアプリアイテムが削除されています(api/todosルートにアクセスして削除されていることも確認できます)。しかし、削除ボタンを2回押してブラウザをリフレッシュして、実際にデータベースからアイテムを削除する必要があります。

なぜこのエラーが発生するのですか?どのように修正しますか?

+0

405応答を受け取ったら、どのアクセス制御許可メソッドが応答ヘッダーにリストされていますか? –

+0

CORSをセットアップしましたか? – imrealashu

+0

@ScottSchupbach Allow:「GET、HEAD」 –

答えて

1

ほとんどの問題はHTTPリダイレクトreturn redirect('todos');で発生しますが、リクエストは(Axueを使用するVueコンポーネントからの)JSON/AJAXリクエストであるため、JSON応答を返す必要があります。 return文をreturn response()->json('Deleted');に変更すると、このトリックが実行されます。

関連する問題