【Ajax, Rails, いいね機能】2回連続いいねボタンを押すとInvalidAuthenticityTokenエラーが出てしまう

Question

前提・実現したいこと

Ruby on Railsで転職用の個人アプリを制作しています。
Ajaxを使っていいね機能を実装中に以下のエラーメッセージが発生しました。

２回以上連続で「いいね」ボタンを押すと下記のエラーメッセージが表示されます。
(１回だけ押した場合は問題なく動きます）

実現したい挙動は、連続で「いいね」ボタンを押しても問題なく非同期通信が行われて、「いいね」→「いいねを取り消す」または「いいねを取り消す」→「いいね」と変更できるようにすることです。

間違っているかもしれませんが、非同期通信ではRailsがデフォルトでやってくれているCSRF対策の適用外となるから、自分でAuthenticityTokenを生成する記述をしなければならないのではないかと考え、
自分でAuthenticityTokenを生成する記述を他の記事を参考に書いてみましたが、同じメッセージが表示されてしまいました。

もしお分かりになる方いましたら、ご教示頂ければ幸いです。

発生している問題・エラーメッセージ

ActionController::InvalidAuthenticityToken

該当のソースコード

#####jQuery(like.js)

$(function(){
  
  function buildHTML(like){
    var html = `<form class="button_to" method="post" action="/posts/${like.post_id}/likes/${like.id}">
                  <input type="hidden" name="_method" value="delete">
                  <input type="submit" value="いいねを取り消す">
                </form>
                <div class="likeCounts">
                  いいね数：
                  ${like.counts}
                </div>`
    return html;
  }

  function buildDeleteHTML(like){
    var html = `<form class="button_to" method="post" action="/posts/${like.post_id}/likes">
                  <input type="hidden" name="_method" value="good">
                  <input type="submit" value="いいね">
                </form>
                <div class="likeCounts">
                  いいね数：
                  ${like.counts}
                </div>`
    return html;
  }

  $('.button_to').on('submit', function(e) {
    e.preventDefault();
    $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
      var token;
      if (!options.crossDomain) {
        token = $('meta[name="csrf-token"]').attr('content');
        if (token) {
          return jqXHR.setRequestHeader('X-CSRF-Token', token);
        }
      }
    });
    if($('.button_to').children().is('#like')) {
      var formData = new FormData(this);
      var url = $(this).attr('action')
      $.ajax({
        url: url,
        type: "POST",
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false
      }) 
      .done(function(data){
        $('.button_to').remove();
        $('.likeCounts').remove();
        var html = buildHTML(data);
        $('.like').append(html);
        console.log('good');
        // $('.form__submit').prop('disabled', false);
      })
      .fail(function(){
        alert('エラー');
      })
    } else {
      var formData = new FormData(this);
      console.log(this);
      var url = $(this).attr('action')
      $.ajax({
        url: url,
        type: "DELETE",
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false
      }) 
      .done(function(data){
        $('.button_to').remove();
        $('.likeCounts').remove();
        var html = buildDeleteHTML(data);
        $('.like').append(html);
        // $('.form__submit').prop('disabled', false);
      })
      .fail(function(){
        alert('エラー');
      })
    }
  })
})

#####ルーティング(routes.rb)

Rails.application.routes.draw do
(中略)
  resources :posts do
    resources :comments, only: :create
    resources :likes, only: [:create, :destroy]
  end
(中略)
end

#####コントローラー(likes_controller.rb)

class LikesController < ApplicationController
  def create
    @like = current_user.likes.create(post_id: params[:post_id])
    if @like.save
      @likeCounts = Like.where(post_id: params[:post_id])
      respond_to do |format|
        format.json
      end
    else
      flash[:alert] = 'エラーが発生しました。'
      redirect_to post_path(@like.post.id)
    end
  end

  def destroy
    @like = Like.find_by(post_id: params[:post_id], user_id: current_user.id)
    @like.destroy
    if @like.destroy
      @likeCounts = Like.where(post_id: params[:post_id])
      respond_to do |format|
        format.json
      end
    else
      flash[:alert] = 'エラーが発生しました。'
      redirect_to post_path(@like.post.id)
    end
  end
end

ビュー（show.html.haml）

.like
  - if user_signed_in?
    - if current_user.already_liked?(@post)     
      .likeIcon
        %i.far.fa-heart.likeIcon-fa-heart.heart
    - else
      .likeIcon
        %i.far.fa-heart.likeIcon-fa-heart
    - if current_user.already_liked?(@post)
      = button_to 'いいねを取り消す', post_like_path(@post), method: :delete, id: 'delete'
    - else
      = button_to 'いいね', post_likes_path(@post), id: 'like'
  .likeCounts
    いいね数：
    = @post.likes.count

#####JSON(create.json.jbuilder)

json.user_id @like.user_id
json.post_id  @like.post_id
json.id @like.id
json.counts @likeCounts.length

#####JSON(destroy.json.jbuilder)

json.user_id @like.user_id
json.post_id  @like.post_id
json.id @like.id
json.counts @likeCounts.length

調べてわかったこと

エラー原因を調べる過程で下記のことを知りました。
・application_controller.rbのprotect_from_forgeryメソッドを定義したことにより、Railsが自動的にCSRF対策をしてくれている。
・CSRFとは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことで、掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべき他サイトからのリクエストを受信し処理してしまう。その対策をする必要がある。

・フォーム送信前のページでワンタイムトークンが生成され、フォーム送信ページにhiddenで生成したトークンが埋め込まれる。リクエスト送信先でセッションに格納されたトークンとリクエストとして送られてきたトークンが一致するか確認する。この確認で一致していないというのが今回のエラー？

仮説

AuthenticityTokenが生成されていない？
リロードすれば、「いいね」ボタンを押して問題なく非同期で動くことから、2回目に「いいね」ボタンを押した時はapplication_controller.rbのprotect_from_forgeryメソッドが機能していないのではないかと予想した。
非同期通信ではRailsがデフォルトでやってくれているCSRF対策の適用外となるから、自分でAuthenticityTokenを生成する記述をしなければならない？

試したこと

下記のコードをajaxメソッドの前に追記したが、うまくいかなかった。

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  var token;
  if (!options.crossDomain) {
    token = $('meta[name="csrf-token"]').attr('content');
    if (token) {
      return jqXHR.setRequestHeader('X-CSRF-Token', token);
    }
  }
});

補足情報（FW/ツールのバージョンなど）

Ruby 2.5.1
Rails 5.2.4.3

Answer 1

jbuilderの記述は

json.extract! @like, :user_id, :post_id, :id
json.counts @likeCounts.length

の方が短くて綺麗な気がします。

Comments

[nao3434]

jbuilderの書き方でextract!メソッドというのがあることを初めて知りました。教えていただきありがとうございます。

Answer 2

実装したい機能に対してのアプローチが少し冗長というか頑張りすぎてる気がしますね、、
このへん参考にして作ってみた方がいい気がします

Comments

[nao3434]

>実装したい機能に対してのアプローチが少し冗長というか頑張りすぎてる気がしますね、、
このアプローチを取ったのは、現在スクールに通っていまして、スクールのAjax実装のページを参考にするとこちらのアプローチに近い感じだったのが理由です。
でも現役のエンジニアの方からは冗長な印象を受けるというのは、自分にとっては発見でした。
このActionController::InvalidAuthenticityTokenというエラーさえ解決できればうまくいきそうなので、もう少しこのやり方でやってみようかなと思いますが、いつまでもここで止まっているわけにもいかないので、解決できなければ教えて頂いた記事のアプローチで進めようと思います。そちらのアプローチの方が必要最小限のコード量で済みそうですし。
長文失礼しました。教えていただきありがとうございます。

[nao3434]

教えて頂いた記事やこちらの記事（https://qiita.com/shiro-kuro/items/f017dce3d199f06d1dcd）を参考にして、無事いいね機能の非同期化を完了させることができました。ありがとうございました！

Answer 3

あと、

  function buildHTML(like){
    var html = `<form class="button_to" method="post" action="/posts/${like.post_id}/likes/${like.id}">
                  <input type="hidden" name="_method" value="delete">
                  <input type="submit" value="いいねを取り消す">
                </form>
                <div class="likeCounts">
                  いいね数：
                  ${like.counts}
                </div>`
    return html;
  }

  function buildDeleteHTML(like){
    var html = `<form class="button_to" method="post" action="/posts/${like.post_id}/likes">
                  <input type="hidden" name="_method" value="good">
                  <input type="submit" value="いいね">
                </form>
                <div class="likeCounts">
                  いいね数：
                  ${like.counts}
                </div>`
    return html;
  }

上記のjsで追加するhtmlにid="like"がないと元々のビューにあるhtmlと違ってしまうかと思います。
また、value="good"のgoodの部分はhttpメソッドを入れるところだと思います。この場合はpostでしょうか。

Comments

[nao3434]

返信が大変遅れまして申し訳ございません。INPUT type="hidden"の時のvalue属性にはhttpメソッドが入るということを知りませんでした。大変勉強になりました。ありがとうございます。教えて頂いた箇所を修正いたしました。ちなみにエラーは今も変わらず表示されたままです。

[nao3434]

その後無事いいね機能の非同期化を完了させることができました。自分では気付かない点を教えていただきありがとうございました！

Answer 4

エラーに直接関係ないかもしれませんが、コントローラのdestroyアクションで@likeを2回消そうとしているのが気になりました。

@like.destroy
  if @like.destroy

Comments

[nao3434]

gohsan53さん
ご回答頂きありがとうございます。
自分では気づきませんでしたが、createアクションを見ると@like.saveは1回しか書いていなくてもsaveできているため、@like.destroyも教えて頂いた通り条件分岐の方だけでよく、1つ目は不要かもしれません。
帰宅しましたらすぐ修正いたします。
帰宅後の返信となるため、返信が遅くなりますことご容赦ください。