12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】link_toでdeleteが効かない時の解決方法

Last updated at Posted at 2020-06-02

#最近たまにある現象
・link_toで実装した削除ボタンが正常に動かない
・deviseを使用したログアウト機能でUsersコントローラーのshowアクションが動く

どちらも、HTTPメソッドに__DELETE__を指定しているにもかかわらず__GET__でリクエストが送られていることが原因でした。

※メソッドの指定はできている状態の話です。まずは検証ツールでHTMLを確認します。

<a data-method="delete" href="/users/sign_out">ログアウト</a>

#結論
###head間は触らないほうがいいです。
__rails newコマンド__でアプリを作成した際、レイアウトファイル(application.html.erb)内のhead間には以下の記述がデフォルトであるはずです。
一見意味がわかりませんが、消さないでください。まとめて貼れば解決します。

application.html.erb
  <head>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

#今回必要だった記述は2行

###application.jsの読み込み

application.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

application.jsを読み込んでいます。これでdeleteメソッドが効くようにはなります。

###CSRF対策
CSRF(クロスサイトリクエストフォージェリ)対策の以下の記述をします。
これがないと意図しないリクエストを受信してしまいます。脆弱性です。

application.html.erb
<%= csrf_meta_tags %>

これがないとこんなエラーが出ます。
スクリーンショット 2020-03-13 1.04.15.png

Railsのルールのようです。参考

#解決しなかった場合
###javascriptのrequireを記述する
app/assets/javascript/application.js内に以下を記述する。

application.js
//= require jquery
//= require jquery_ujs

jquery_ujsはハイパーリンクからGET以外のリクエストを生成してくれます。

#なぜJSが必要か
HTMLで使えるHTTPメソッドは__GET__と__POST__のみです。
今回使いたかった__DELTE__はjavascriptで擬似的に作成されるため、HTMLで読み込めなければ動きません。
詳しい動きはこちらが参考になります。

#まとめ
携帯用ホムペの時代からhead間編集(上級者向け)だったことを覚えています。
これに限らず、デフォルトの記述を消す時は本当に大丈夫か一旦調べて考えてみてください。

12
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?