0
0

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 5 years have passed since last update.

Ajaxで動的に変わるセレクトボックスを作ったが動かないのでメモ(前は動いたのに)

Last updated at Posted at 2019-04-08

#1. 前提
セレクトボックスで都道府県を選択すると、次のセレクトボックスで市町村などのより詳細なエリアが選択できるやつ

Image from Gyazo

#2. 現象

都道府県を選択しても次のセレクトボックスが動かない。
(開発環境(AWS Cloud9)でのみ。Herokuでデプロイしたものは動く。)

#3. 原因を調査

alt
【デバッグ解説動画】RailsアプリでAjaxがうまく動かないときに確認するポイントあれこれ

Ajaxが動く流れ

  1. ブラウザでセレクトボックス変更
  2. jQueryからJSへreplaceChildrenOption
  3. JSからRailsにリクエスト
  4. Rails内でデータ取得
  5. JSにレスポンス
  6. ブラウザのサブカテゴリ書き換え

手順1

  • ChromeのデベロッパーツールのSourceでブレークポイントを付ける
    • 止まる→1〜2あたりは動いている
    • 止まらない→イベントが正しく設定されていない→そこにブレークポイントをつけてみる

 ↑問題ない

手順2

  • NetworkのXHR:JS側でリクエストを投げたのがわかる。返ってきたデータなども見れれば3〜4はできてるとわかる

 ↑返ってこない。Why?

#4.Railsのログを見てみる

Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

「422って数字、デベロッパーツールのエラーで見たことあるな…」

調べてみる

Ruby on Rails のサーバーにPOSTが送れない!?(Can't verify CSRF token authenticity)
http://nonbiri-tereka.hatenablog.com/entry/2014/09/03/104824

CSRFとはなんでしょうか?Cross-Site Request Forgeriesの略で、POSTするところに誘導するような攻撃のようです。これを防ぐ為に実装されたとかなんとか。

解決方法
ApplicationControllerのprotect_from_forgery, :exceptionの箇所を、null_sessionとする。

ここで紹介されているとおりexceptionを、null_sessionにしたところきちんと動いてくれた。

ひとまずここまで。
外部からPOSTできない?RailsのCSRF対策をまとめてみた
↑こういうの見ればいい?

また調べよう。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?