原因
- CSRF保護がオフになっていたため
CSRF(Cross-Site Request Forgery)
悪意のあるユーザーがサーバーへのリクエストを捏造して正当なものに見せかけ、認証済みユーザーを装うという攻撃手法
このエラーが怒った原因として、Vue側(フロント)から送られてきたPOSTリクエストの中に含まれるCSRFトークン。そして、Railsはページのトークンとcookie内のトークンが同一のものではないと判断されたがために起こってしまったエラーと考えられます。
Vue + Railsを使用して作成したがため外部からのPOSTによってエラーが出たのではないかと思います。
解決(結論)
結論から申しますと、僕の場合はcotrollers/user_controller.rb
へ
CSRF(Cross-Site Request Forgery)の対策用のコードを1行足すだけでした。
class UsersController < ApplicationController
protect_from_forgery # 追記
・
・(略)
・
end
解決方法
解決に至った手順についてです。
①ディベロッパーツールにて、422 (Unprocessable Entity)を確認
②ディベロッパーツールのNetworkタブ→JSでフロント側の確認
フロント側は大丈夫そう
③続いて、XHRタブ
XHRタブは、非同期通信でリクエストを送っているリソースを確認できるみたいです。
ここに422エラーがありました。
④色々、触ってみる。(ここでは)usersをタップ
するとこんな画面が。
Previewタブをみてみると・・・
⑤ActionController::InvalidAuthenticityToken
おお!見慣れたRailsのエラーが!!!!
ここで、「なるほど、CSRF保護がオフになっているのか」と解決まで辿り着きました。
最後に。今回学んだこと
ログや、ディベロッパーツールを舐めてはいけないこと思い知らされました。
恥ずかしながら、エラー発生時、ネットワークタブなどこれまで見向きもしていませんでした。
しかし今回、色々ディベロッパーツールをあさりながら解決に至ることが出来たのも事実です。
Networkタブ。活用していきます。