2018-08-04

fetch APIを使ってRailsのAPIを叩くものを作っていて、GETはうまく行ったのだけど、POSTしようとしたらCSRF関連のエラー(ActionController::InvalidAuthenticityToken)になってちょっとはまった。

原因

fetch APIはGETもPOSTもできるのだけど、デフォルトではCookieをサーバに送らないという仕様になっている。

RailsのCSRF対策は「送られてきたトークンをセッションに保存されたものと比較する」というものだが、セッション情報はデフォルトではCookieに保存される(CookieStore)ので、Cookieをサーバに送らないとセッションにトークン情報がないぞということになり、InvalidAuthenticityTokenになる。

修正方法

fetch APIの第二引数に{credentials: "same-origin"}を入れてCookieをサーバに送らせることでうまく行った。

• https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters