【Rails】Ajaxでデータを渡す際のCSRFエラー【jQuery】

やりたいこと

$.ajaxでデータをRails側に渡して保存したい。

function hoge(){
  $.ajax({
    type: 'POST', // リクエストのタイプ
    url: '/hoge', // リクエストを送信するURL
    data: {
      hoge: { hoge: hogehoge }
    }, // サーバーに送信するデータ
    dataType: 'json' // サーバーから返却される型
  })
}

エラー内容

422 (Unprocessable Entity)
Can't verify CSRF token authenticity.

原因

RailsにはCSRFという脆弱性の対策が備わっている。
Railsが提供するformなどのヘルパーを使うと自動でセキュリティトークンが設定されるが$.ajaxでは自分で設定しなければならない。

解決策

CSRF対策を無効にするという方法もあるが、通信の際にセキュリティトークンを設定すればよい。

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

function hoge(){
  //  ajax通信条件にCSRFトークンを入れる
  set_csrftoken()

  $.ajax({
    type: 'POST', // リクエストのタイプ
    url: '/hoge', // リクエストを送信するURL
    data: {
      hoge: { hoge: hogehoge }
    }, // サーバーに送信するデータ
    dataType: 'json' // サーバーから返却される型
  })
}

参考

RailsのCSRF対策について - Qiita

【Rails6】jQueryのAjax通信を行う方法（CSRF対策付き） | サシミスタジオ