AngularJS で Rails の CSRF トークン検証に引っか​かったときの対処法

JavaScript Angular

Rails で AngularJS を使おうと、angular-rails や angularjs-rails といった gem を調べてみたけど、どれもイマイチだったんで vendor/assets/javascripts 下に AngularJS ファイル一式を放り込んで開発している。

AngularJS のデータバインディングを活用してアプリをサクサク実装していたら、AngularJS でモデルを更新するために POST リクエストを送信するところで、Rails の CSRF トークンの検証に引っかかってしまった。

Backbone のときは上手くいってたんだけどな～って、rails-backbone のソース見たら、裏でこっそり CSRF トークンをリクエストヘッダーに追加してくれてたみたいだ。

今回は gem を使っていないんで、HTML の header に埋め込まれている CSRFトークンを取得してリクエストヘッダーに追加する、といったコードを自分で書かないといけない。

Web API を呼び出す箇所で毎回設定するのはナンセンスなので、http リクエストで常に送信するように $httpProvider を設定するのがいい。

 var app = angular.module("app", ["controllers"]);
 
// CSRF トークンを常にリクエストヘッダーに設定する
 app.config(["$httpProvider", function(provider) {
   provider.defaults.headers.common["X-CSRF-Token"] = $("meta[name=csrf-token]").attr("content");
 }]);