LoginSignup
4
0

More than 3 years have passed since last update.

【Vue + Rails】422 (Unprocessable Entity) 新規ユーザーの作成ができない原因と解決方法について

Posted at

原因

  • CSRF保護がオフになっていたため

CSRF(Cross-Site Request Forgery)

悪意のあるユーザーがサーバーへのリクエストを捏造して正当なものに見せかけ、認証済みユーザーを装うという攻撃手法

このエラーが怒った原因として、Vue側(フロント)から送られてきたPOSTリクエストの中に含まれるCSRFトークン。そして、Railsはページのトークンとcookie内のトークンが同一のものではないと判断されたがために起こってしまったエラーと考えられます。

Vue + Railsを使用して作成したがため外部からのPOSTによってエラーが出たのではないかと思います。

解決(結論)

結論から申しますと、僕の場合はcotrollers/user_controller.rb
CSRF(Cross-Site Request Forgery)の対策用のコードを1行足すだけでした。

cotrollers/user_controller.rb
class UsersController < ApplicationController
  protect_from_forgery # 追記

  
  ・(略)
  
end

解決方法

解決に至った手順についてです。

①ディベロッパーツールにて、422 (Unprocessable Entity)を確認

スクリーンショット 2021-03-04 11.44.34.png

②ディベロッパーツールのNetworkタブ→JSでフロント側の確認

スクリーンショット 2021-03-04 11.47.10.png

スクリーンショット 2021-03-04 11.48.20.png

フロント側は大丈夫そう

③続いて、XHRタブ

スクリーンショット 2021-03-04 11.48.58.png

XHRタブは、非同期通信でリクエストを送っているリソースを確認できるみたいです。
スクリーンショット 2021-03-04 11.50.41.png

ここに422エラーがありました。

④色々、触ってみる。(ここでは)usersをタップ

スクリーンショット 2021-03-04 11.52.37.png

するとこんな画面が。

Previewタブをみてみると・・・

⑤ActionController::InvalidAuthenticityToken

スクリーンショット 2021-03-04 11.53.38.png

おお!見慣れたRailsのエラーが!!!!

ここで、「なるほど、CSRF保護がオフになっているのか」と解決まで辿り着きました。

最後に。今回学んだこと

ログや、ディベロッパーツールを舐めてはいけないこと思い知らされました。

恥ずかしながら、エラー発生時、ネットワークタブなどこれまで見向きもしていませんでした。
しかし今回、色々ディベロッパーツールをあさりながら解決に至ることが出来たのも事実です。

Networkタブ。活用していきます。

参考

【Rails API】ActionController::InvalidAuthenticityTokenの解決方法

RailsのCSRF保護を詳しく調べてみた(翻訳)

4
0
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
4
0