記事の目的
Railsでオリジナルアプリを作成中にAjaxでデータ保存出来ずに困ったこと、どのように解決したのかを忘れないために書いておきます。
開発環境
- macOS Big Sur 11.1
- VScode
- Ruby 2.6.5
- Rails 6.0.3.4
- mysql 14.14
- JavaScript
- gem 3.0.3
- heroku 7.47.12
オリジナル読書アプリ
読書アプリケーションを作りました。
https://github.com/hiro-mu/book_smart.git
困ったこと ##
実装したのは読書アプリによくあるようなドラッグした部分の背景色が変わる機能です。
この機能の実装は
- 文字列がドラッグされた場合にイベントが発生し、その文字列をデータベースに保存
- データベースに存在する文字列が表示されている場合、replaceメソッドでブラウザ上のHTMLに背景色を変えるCSSを追加
と言う流れで行っています。
難しかったところはこの部分です。
highlight.js
XHR.open("GET", `/highlights/create?book_id=${bookId}&pagenum=${pageNum}&text=${selectedStr}`, true);
本来であればデータベースに変更を加えるリクエストなので、POSTを使うべきです。しかし、保守性の観点からRailsに外部からのデータベースを変更させるPOSTやPUTのリクエストは受け付けないという機能があるらしく、データベースに保存出来ませんでした。（厳密にはRailsはDELETE、PATCH、PUTのHTTPメソッドは全てPOSTとして扱うようです）
ようやく見つけた解決策は、HTTPメソッドはGETにしておいて、パラメータをURLに含めて送ってしまおうという手法でした・・・もっといい解決策があれば知りたいです。
学んだこと
CSRFなどの不正なリクエストのためにRailsに備わっているセキュリティ対策によって自身が苦しめられました。非常に勉強になりました。